Flexslider non funziona correttamente quando si usa ng-repeat

Question

Sto riscontrando problemi con lo slider flex che smette di funzionare se uso ng-repeat. Altrimenti funziona bene.

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> 

ho ricreato questo problema in un plunker http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview

Answer 1

Bisogna ritardare la flexslider fino a quando il tutto all'interno della vostra direttiva è reso. È possibile utilizzare il servizio $timeout:

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

Vedi plnkr.

Answer 2

Per qualche motivo la direttiva non ha funzionato per me, così dopo un lungo processo e il periodo di errori, mi si avvicinò con il seguente:

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

e semplicemente chiamare questo tutto dopo che hai caricato (le mie immagini provengono da un URL caricato in fase di esecuzione):

setTimeout(startSlideShow, 10)