ng-repeat 中的多个 bxslider 实例

Question

由于 ng-repeat 问题，我创建了加载 bxslider 的指令。问题：由于 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

您在 link 实例中选择 bxSlider 的方式不正确。我假设选择 class 会生成多个实例。这是使其工作的一种方法：

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

ng-repeat 中的多个 bxslider 实例

Multiple Instances of bxslider inside ng-repeat

javascript

bxslider

angularjs

angularjs-directive

angularjs-ng-repeat