Question

您好我正在尝试运行Jquery Flex滑块。 Flex滑块在没有重复的情况下工作，如下所示：http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview

但不能像这样使用ng-repeat：

http://plnkr.co/edit/nW3i9bmUwtlbXn2Vhy4O?p=preview

指令：

.directive('flexslider', function () {

return {
link: function (scope, element, attrs) {

  element.flexslider({
    animation: "slide"
  });
}
}
});

工作模板：

<div class="flexslider" flexslider>
  <ul class="slides">
    <li>
      <img src="http://placekitten.com/g/400/200">
    </li>
    <li>
      <img src="http://placekitten.com/g/400/200">
    </li>
    <li>
      <img src="http://placekitten.com/g/400/200">
    </li>
    <li>
      <img src="http://placekitten.com/g/400/200">
    </li>
  </ul>
</div>

不工作themplate：

<div class="flexslider" flexslider>
  <ul class="slides">
    <li ng-repeat="n in list">
      <img src="http://placekitten.com/g/400/200">
    </li>
  </ul>
</div>

在mainCtrl中列出：

 $scope.liste = [1,2,3,4,5];

Answer 1

这是由于img的延迟加载。

您可以使用以下

 <div ng-view>
    {{myFoo()}}
  </div>

并在myFoo函数中调用flexSlider

$scope.myFoo = function(){
    $(".flexslider").flexslider({
        animation: "slide"
      });
  }

这是Fiddler

或者您可以点击此链接 Lazy Load Flex

Answer 2

指令在重复过程之前被触发

这解决了这个问题：

setTimeout(function(){
    element.flexslider({
      animation: "slide"
    });  
  },500);

在这里工作http://plnkr.co/edit/rZN49pPm7lQdYnECGiM9?p=preview

Angular指令不使用ng-repeat

2 个答案: