Question

我想使用带角度的响应式滑块插件，但我不知道如何解决问题。

插入的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指令。

我的控制器看起来像这样：

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可用之后观看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

Answer 2

最好的方法是创建一个指令，但你可以像这样修复它。在创建幻灯片之前，我们等待角度渲染所有元素。

kingaApi.Photo.getFeaturedPhotos()
      .success(
      function (response) {
        $scope.photos = response.photos

        setTimeout(function(){
             $(".rslides").responsiveSlides();
        })

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

使用带角度的外部库

2 个答案: