javascript - 使用带 Angular 外部库

Question

我想使用带 Angular 响应式 slider 插件，但我不知道如何解决这个问题。

插入的 html 看起来像这样:

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

并且 courasel 必须以标准方式初始化:

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

我应该如何使用 Angular Directive(指令)来实现它。

我的 Controller 看起来像这样:

angular.module('kingaFrontend')
  .controller('FeaturedCtrl', function ($scope, kingaApi) {

    kingaApi.Photo.getFeaturedPhotos()
      .success(
      function (response) {
        $scope.photos = response.photos
      })
      .error(function (response){
        switch(response && response.code) {
          default:
            console.log("error", response )
            // $scope.errors.usernameErrors.push('An error occurred.');
        }
      });
  });

Answer 1

如果您需要为 jquery 插件使用单独的指令，请查看此内容。

angular.module('kingaFrontend').directive('slider',function() {
    var linker = function(scope, element, attr) {
        scope.$watch('photos', function () {
            $(".rslides").responsiveSlides();
        });
    };
    return {
        restrict: "A",
        link: linker
    }
});

并添加 slider 指令即可。

<ul class="rslides" slider>...

更新

您可以修改它以更有效地重用该指令。

attr data-slider-class-selector 插件要初始化的类名。

attr data-slider-refresh-on-watch $scope 属性名称(如果此属性更改插件将再次初始化)。在这种情况下， $scope.photos 会在一段时间后(ajax 调用后)发生变化，因此您需要在 ajax 调用后初始化插件。这样您就可以观看 photos from 指令，并在 photos 可用后初始化插件。

<ul class="rslides" data-slider-class-selector="rslides" data-slider-refresh-on-watch="images" slider>

然后在指令中获取这些新属性值并使用它们，

app.directive('slider', function() {
    var linker = function(scope, element, attr) {

    // get the value of data-slider-class-selector
    var selector = attr.sliderClassSelector;

    // get the value of data-slider-refresh-on-watch
    var watchSelector = attr.sliderRefreshOnWatch;

    scope.$watch(watchSelector, function() {
        $('.'+selector).responsiveSlides({
          auto: true,
          pager: true,
          speed: 500,
          timeout: 2000,
          maxwidth: 540
        });
      });      
  };

  return {
    restrict: "A",
    link: linker
  }
});

这是一个 simple demo Plunker