Abhilash Abhilash - 7 months ago 65
Javascript Question

Flexslider not working properly when using ng-repeat

I am having issues with flex slider as it stops working if I use ng-repeat. Otherwise its working fine.

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>


I have recreated this issue in a plunker http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview

Answer

You have to delay the flexslider until the everything inside your directive is rendered. You can use the $timeout service:

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

See plnkr.