在 Angular JS 中初始化 jQuery 插件（RoyalSlider）答案

【问题标题】：Initialising jQuery plugin (RoyalSlider) in Angular JS在 Angular JS 中初始化 jQuery 插件（RoyalSlider）
【发布时间】：2014-07-19 00:56:08
【问题描述】：

尝试将 RoyalSlider 作为指令加载。这是我的指令，虽然我不确定为什么，但在第一次加载时有效，但在后续加载时无效：

app.directive('royalSlider', ['$timeout', function($timeout) {

    $(".royalSlider").royalSlider({
        keyboardNavEnabled: true,
        arrowsNav: true,
        arrowsNavHideOnTouch: true,
        imageScaleMode: 'fill',
        slidesSpacing: 0
    });

}]);

出现错误：

TypeError: Cannot read property 'compile' of undefined

假设问题是在所有内容完成后加载，我将其更改为：

app.directive('royalSlider', ['$timeout', function($timeout) {
    return {
        link: function ($scope, element, attrs) {
            $scope.$on('$viewContentLoaded', function () {

                $(".royalSlider").royalSlider({
                    keyboardNavEnabled: true,
                    arrowsNav: true,
                    arrowsNavHideOnTouch: true,
                    imageScaleMode: 'fill',
                    slidesSpacing: 0
                });

            })
        }
    }
}]);

什么都没有发生。 $timeout 也在那里，因为我也尝试过这个技巧，但无济于事。

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

试试这个

app.directive('royalSlider', ['$timeout', function($timeout) {
    return {
        link: function ($scope, element, attrs) {

            $scope.$apply($(".royalSlider").royalSlider({
                    keyboardNavEnabled: true,
                    arrowsNav: true,
                    arrowsNavHideOnTouch: true,
                    imageScaleMode: 'fill',
                    slidesSpacing: 0
                }));


        }
    }
}]);

或者

app.directive('royalSlider', ['$timeout', function($timeout) {
        return {
            link: function ($scope, element, attrs) {

                $(".royalSlider").royalSlider({
                    keyboardNavEnabled: true,
                    arrowsNav: true,
                    arrowsNavHideOnTouch: true,
                    imageScaleMode: 'fill',
                    slidesSpacing: 0
                });
                 $scope.$apply();


            }
        }
    }]);

【讨论】：

不幸的是，两者都不起作用，更不幸的是，控制台中没有任何线索知道出了什么问题。
好吧，再来一次试试这个 app.directive('royalSlider', ['$timeout', function($timeout) { return { link: function ($scope, element, attrs) { $(".royalSlider").royalSlider({ keyboardNavEnabled: true, arrowsNav: true, arrowsNavHideOnTouch: true, imageScaleMode: 'fill', slidesSpacing: 0 }); $scope.$apply(); } } }]);
所有选项都在添加 Restrict: "AEC" 的情况下工作，但控制台出现错误。 Error: [$rootScope:inprog] $digest already in progress
好的，那么问题是没有限制。所以新的错误是因为我们使用了$scope.$apply()。你可以删除 $scope.$apply() 看看它是否仍然可以正常工作吗？
遇到同样的问题 - 您找到解决方案了吗？

【解决方案2】：

我已经有 2 种情况，指令和服务/工厂不能很好地发挥作用。

场景是我有（拥有）一个具有服务依赖注入的指令，并且从该指令中我要求服务进行 ajax 调用（使用 $http）。

最后，在这两种情况下，ng-repeat 都没有归档，即使我给了数组一个初始值。

我什至尝试使用控制器和隔离作用域来制作指令。只有当我将所有东西都移到控制器上时，它才会像魔术一样工作。其中之一是皇家滑块。

这是我的代码

app.service('AjaxService', ['$log', '$http', function ($log, $http) {
    var me = this;
    me.CallHttpAjaxAndMapSearch = function (url, targetObjext, propertyName, callback, splitObject) {
        $http.get(url)
               .success(function(data){
                //etc., mapping to selectedArray
                if (propertyName) {
                    targetObjext[propertyName] = selectedArray;
                }
                else {
                    targetObjext['selectedArray'] = selectedArray;
                }
                if (callback) {
                    callback();
                }
            });
    };
}]);

app.service('slidersService', ['$log', '$http', 'AjaxService', function ($log, $http, AjaxService) {
    var me = this;
    me.initRoyalSlider = function (url, element, arrayName, sliderOptions, splitObject) {
        me[arrayName] = [];
        var successCallback = function slidersService_successCallback() {
            setTimeout(function slidersService_successCallback_Timeout() {
                $log.log('setTimeout for ' + arrayName);
                element.royalSlider(sliderOptions);
            }, 0);

        };
        AjaxService.CallHttpAjaxAndMapSearch(url, me, arrayName, successCallback, splitObject);
    };
}]);

app.controller('royalSlider', function ($scope, $attrs, $log, slidersService) {
    var arrName = $attrs.royalSlider;
    var options = JSON.parse($attrs.royalSliderOptions);
    var element = $attrs.$$element;

    $scope.svc = slidersService;
    slidersService.initRoyalSlider($attrs.royalSliderUrl, element, arrName, options, $attrs.splitObject);
});

还有 HTML

            <div class="slides royalSlider rsMinW "
                    ng-controller="royalSlider" 
                    royal-slider="mainSlider" 
                    royal-slider-options='{"loop":true,"autoPlay":{"enabled":true,"pauseOnHover":true,"delay":3000},"arrowsNav":false,"controlNavigation":"bullets"}'
                    royal-slider-url="/_api/search/query?bla bla">
                   <div ng-repeat="slide in svc.mainSlider">

【讨论】：