javascript - Initialising jQuery plugin (RoyalSlider) in Angular JS

Question

Trying to load the RoyalSlider as a Directive. Here's my directive, which works though I'm not sure exactly why, on first load but not on subsequent loads:

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

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

}]);

with the error:

TypeError: Cannot read property 'compile' of undefined

Assuming the issue is loading when all content is finished, I changed it to this:

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
                });

            })
        }
    }
}]);

And Nothing happens. $timeout is also in there because I've tried that trick too, to no avail.

Answer 1

Try this

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
                }));


        }
    }
}]);

Or

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();


            }
        }
    }]);