[angularjs]Flexslider 工作不正常时使用ng-repeat

发布时间: 2017/4/16 1:42:40
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

正在使用 flex 滑块的问题因为它停止工作,如果我使用 ng-repeat 。否则为其做工精细。

myApp.controller('frontCtrl', function ($scope) {
  var results = {"id":4,"title":"sddddddd", "photos":[{"url":"http://placekitten.com/g/400/200","id":1},{"url":"http://placekitten.com/g/400/200","id":2}]};
  $scope.images=results.photos

});

myApp.directive('flexslider', function () {

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

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

HTML

    <div class="flexslider" flexslider>
      <ul class="slides">

        /* This wont work*/
        <li ng-repeat="img in images">
          <img src="{{img.url}}">
        </li>


          /* This work*/
        <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>

我已重新创建这个问题在呆瓜http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview

解决方法 1:

你不得不延迟 flexslider,直到一切里面你的指令呈现。您可以使用 $timeout 服务︰

myApp.directive('flexslider', function ($timeout) {
  return {
    link: function (scope, element, attrs) {
      $timeout(function(){
        element.flexslider({
          animation: "slide"
        });
      })
    }
  }
});

请参阅plnkr

赞助商