Question

我已经创建了加载bxslider的指令，因为它有ng-repeat问题。问题：由于对指令进行了ng-repeat，因此生成了多个bxslider实例。

当我试图将该div包装在另一个ng-repeat中时，我得到了一个bxslider的多个实例，而另一个则创建了另一个。

APP.JS

var app = angular.module('myApp', []);

app.directive('startslider',function() {
return {
   restrict: 'A',
   replace: true,
   template: '<ul class="bxslider">' +
               '<li ng-repeat="picture in pictures">' +
                 '<img ng-src="{{picture.src}}" alt="" />' +
               '</li>' +
              '</ul>',
   link: function(scope, elm, attrs) {
      elm.ready(function() {    
           $("." + $(elm[0]).attr('class')).bxSlider({
                mode: 'fade',
                autoControls: true,
                slideWidth: 360,
                slideHeight:600
        });

      });
     }
   }; 
});

app.controller('MainCtrl', function($scope) {
$scope.base = 'http://bxslider.com';
$scope.pictures = [
   {src: $scope.base + '/images/730_200/hill_fence.jpg' },
   {src: $scope.base + '/images/730_100/tree_root.jpg' },
   {src: $scope.base + '/images/730_150/me_trees.jpg' }
 ];
});

HTML：

<div class="a" ng-repeat="t in [1,2,3]">
    <div startslider></div>
</div>

我试图搜索类似的问题并且没有运气。

任何帮助都将非常感谢，感谢您的时间。

Answer 1

您在链接实例中选择bxSlider的方式不正确。我假设选择class正在生成多个实例。以下是一种使其有效的方法：

link: function(scope, elm, attrs)
{
  elm.ready(function()
  {
    $(elm).bxSlider({
      mode: 'fade',
      autoControls: true,
      slideWidth: 360,
      slideHeight:600
    });
  });
}

ng-repeat中的bxslider的多个实例

1 个答案: