Как включить jssor в angularjs?

Question

Я пытаюсь включить jssor в angularjs, но он, вероятно, не работает, поскольку jssor инициализируется перед angularjs, и поэтому элементы ng-repeat не могут быть правильно решены.

<div id="slider1_container"> 
    <div u="slides"> 
    <!-- The static images would work --> 
    <!--   <div><img u="image" src="static/myimg1.jpg"/></div> --> 
    <!--   <div><img u="image" src="static/myimg2.jpg"/></div> --> 
     <div ng-repeat="products in bags"> 
      <div ng-repeat="picture in bag.pictures"> 
       <img u="image" src="{{picture.url}}"></img> 
      </div> 
     </div> 
    </div> 
    <style> 
    ... 
    </style> 
<script>jssor_slider1_starter('slider1_container');</script> 
</div> 

<script src="js/jssor.slider.min.js"></script> 
<script> 
    jssor_slider1_starter = function(containerId) { 
     var options = { 
      $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$, 
       $ChanceToShow: 2 
      }, 
      $FillMode: 1 
     }; 
     var jssor_slider1 = new $JssorSlider$(containerId, options); 
    }; 
</script> 

Вопрос: что может быть не так? И особенно: как я мог отложить инициализацию полного jssor div после того, как загружен angularjs?

ошибка консоли (до angularjs загружен):

"NetworkError: 404 Not Found - http://localhost:8080/%7B%7Bpicture.url%7D%7D" 

Answer 1

Поместите код jssor инициализации в некотором угловом контроллере и использовать $timeout ждать ng-repeat закончить рендеринг вид:

<div id="slider1_container"> 
    <div u="slides" ng-controller="MyCtrl"> 
     <div ng-repeat="products in bag"> 
      <div ng-repeat="picture in bag.pictures"> 
       <img u="image" src="{{picture.url}}"></img> 
      </div> 
     </div> 
    </div> 
</div> 

В вашем файле Javascript

app.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 
    $timeout(function() { 
     jssor_slider1_starter('slider1_container'); 
    }); 
}]);