CODEWITHSUNDEEP
jqueryangularjs
greener
greener

Reputation: 5069

Unable to load images for RoyalSlider in Angular

An angular app loads images after a user action like so:

<div class="royalSlider rsDefault" royalSlider>
  <img class="rsImg" ng-repeat="i in selectedAsset[0].images" ng-src="{{ i }}" />
</div>

In trying to use the RoyalSlider Jquery plugin, I used a directive:

app.directive('royalSlider', function() {
    var linker = function (scope, element, attrs) {
        scope.$watch('selectedAsset', function(){
            element.royalSlider({
                keyboardNavEnabled: true,
                autoScaleSlider: true,
                autoHeight: true
            });
        });
    };
    return {
        restrict: 'AEC',
        link: linker
    }
});

The problem is that the above deletes the images from the DOM when royalslider is instantiated.

What am I missing?

Upvotes: 0

Views: 497

Answers (1)

Samar Rizvi
Samar Rizvi

Reputation: 433

You are not calling the directive right in your view. Use it like this:

<div class="royalSlider rsDefault" royal-slider>
  <img class="rsImg" ng-repeat="i in selectedAsset[0].images" ng-src="{{ i }}" />
</div>

Upvotes: 2

Related Questions