使用AngularJS检索REST API检索数据，请禁用猫头鹰旋转木马JavaScript插件

Question

我刚刚完成了使用fosrestbundle（Symfony3）构建REST API。现在，我想从该API中检索一些数据。

我首先与模拟数据一起使用。实际上，我使用Postman从API中检索了数据，通过将数据复制并粘贴到项目中的AngularJS服务中的变量。因此，模拟服务看起来像这样：

angular.module("MyServiceMock", ['angular.filter'])
    .factory("myService", ['$rootScope', '$filter', function ($rootScope, $filter) {
       var results=         {
           "FAVORITES": [
               {
                   "id": 1,
                   "title": "An Update on The Periscope VIP Program8.",
               },
               {
                   "id": 2,
                   "title": "Storyteller Sit-downs: Sasu Siegelbaum9.",
               },
               ...
        ]
        };
        return {
            getFavorites: function () {
                return results;
            }
             ...
        }
    }])

现在我完成了我想要的所有测试，决定直接与API合作，而不再使用模拟。

我只需用$ http服务替换模拟服务就可以轻松地完成它，并且它效果很好。

但是问题是，我使用的jQuery插件不再起作用，我不知道为什么！

我更改了我的收入顺序，但问题仍然存在。我包含的文件的顺序看起来像这样：

        <script type="text/javascript" src="library/jquery/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
            <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script>
            $(document).ready(function() {
                var owlFavoris = $("#owl-favoris");
                var owlRecents = $("#owl-recents");
                var owlAussiConsultes= $("#owl-aussiConsultes");
                myOwlCarousel(owlFavoris);
                myOwlCarousel(owlRecents);
                myOwlCarousel(owlAussiConsultes);
                function myOwlCarousel(owl) {
                    owl.owlCarousel({
                        items: 5,
                        itemsCustom: false,
                        itemsDesktop: [1399, 4],
                        itemsDesktopSmall: [1100, 3],
                        itemsTablet: [930, 2],
                        itemsTabletSmall: false,
                        itemsMobile: [479, 1],
                        singleItem: false,
                        itemsScaleUp: false,
                        slideSpeed: 200,
                        paginationSpeed: 800,
                        rewindSpeed: 1000,
                        autoPlay: true,
                        autoWeight: false,
                        autoHeight: false
                    })
                }

            });
        </script>
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/i18n/angular-locale_fr-fr.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.14/angular-filter.js" ></script>
        <script type="text/javascript" src="bower/angular-ui-tinymce/src/tinymce.js"></script>
        <script type="text/javascript" src="js/angular-app/app.js" ></script>
        <script type="text/javascript" src="js/angular-app/MesDirectives.js" ></script>
        <script type="text/javascript" src="js/angular-app/MyServiceHttp.js" ></script>
        <script type="text/javascript" src="js/angular-app/MyServiceMock.js" ></script>

owl.carousel插件不再可用，因为我与REST API建立了连接。我在代码的许多地方使用它。对于典范，请在此处使用：

<div id="owl-favoris" class="owl-carousel owl-theme">
   <div  ng-repeat="favorite in data.FAVORITES  | orderBy:'-comment[1].nbreVue' track by $index " class="item">
                     ...
    </div>
 </div>

有什么问题？请帮助！

Answer 1

尝试制作指令，并在稍作暂停之后也可以打电话给jQuery ...类似：

app.directive('carousel', function ($timeout) {
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            $timeout(function () {

                $('#owl-favoris').carousel();

            });
        }
    };
});