如何在angularjs中包含jssor？

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>

问题 ：这里可能出什么问题？ 特别是： 在加载angularjs 之后，如何延迟完整jssor div的初始化？

控制台错误（在加载angularjs之前）：

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

Answer 1

将jssor初始化代码放在某个Angular控制器中，并使用$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');
    });
}]);