Angular指令不適用於ng-repeat

Question

嗨，我正在嘗試運行Jquery Flex滑塊。 Flex滑塊可以像ng-repeat一樣工作，例如： 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>

不起作用它們

<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"
      });
  }

這是提琴手

或者您可以點擊此鏈接Lazy Load Flex

Answer 2

該指令在重復過程之前被解雇

這可以解決問題：

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

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