Flexslider funktioniert nicht richtig, wenn ich ng-repeat verwende

Question

Ich habe Probleme mit dem Flex-Slider, da er nicht mehr funktioniert, wenn ich ng-repeat verwende. Ansonsten funktioniert es gut.

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> 

ich in einem Plunker dieses Problem neu erstellt haben http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview

Answer 1

Sie haben die flexslider zu verzögern, bis das alles in Ihrer Richtlinie gemacht wird. Sie können die $timeout Service nutzen:

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

plnkr See.

Answer 2

Aus irgendeinem Grund die Richtlinie nicht für mich arbeiten, so dass nach einer langen Versuch und Irrtum Zeit kam ich mit dem Follow-up:

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

und rufen Sie einfach diese, nachdem Sie geladen alles haben (meine Bilder stammen aus einer uRL, die zur Laufzeit geladen wird):

setTimeout(startSlideShow, 10)