Flexslider не работает должным образом при использовании ng-repeat

у меня возникли проблемы с Flex slider, поскольку он перестает работать, если я использую 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>

я воссоздал эту проблему в plunker http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview

6
angularjs flexslider javascript jquery

2 ответов

вы должны задержать flexslider до тех пор, пока все внутри вашей директивы не будет отображено. Вы можете использовать $timeout сервис:

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

посмотреть plnkr.

1

по какой-то причине директива не сработала для меня, поэтому после длительного периода проб и ошибок я придумал следующее:

function startSlideShow() {   
    jQuery('.slideshow').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 240,
        controlNav: false
    });
    jQuery('#menu-section a.dropdown-toggle').click(function () {
        jQuery('#menu-section .dropdown-menu').toggle();
    })
}

и просто вызовите это после того, как вы загрузили все (мои изображения поступают из url-адреса, загруженного во время выполнения):

setTimeout( startSlideShow, 10)
2