Инициализация плагина jQuery (RoyalSlider) в Angular JS

Попытка загрузить 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 также присутствует там, потому что я тоже пробовал этот трюк, но безрезультатно.

Ответ 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();


            }
        }
    }]);

Ответ 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">