using external library with angular

Question

I would like to use responsive slider plugin with angular but i don't know how to approach the problem.

the pluging html looks like that:

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

and the courasel has to be initialized in a standard way:

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

How should I make it using angular directive.

My controller looks like that:

angular.module('kingaFrontend')
  .controller('FeaturedCtrl', function ($scope, kingaApi) {

    kingaApi.Photo.getFeaturedPhotos()
      .success(
      function (response) {
        $scope.photos = response.photos
      })
      .error(function (response){
        switch(response && response.code) {
          default:
            console.log("error", response )
            // $scope.errors.usernameErrors.push('An error occurred.');
        }
      });
  });

Kalhan · Accepted Answer · 2015-04-02 07:58:39Z

if you need to go with a separate directive for the jquery plugin, check this out.

angular.module('kingaFrontend').directive('slider',function() {
    var linker = function(scope, element, attr) {
        scope.$watch('photos', function () {
            $(".rslides").responsiveSlides();
        });
    };
    return {
        restrict: "A",
        link: linker
    }
});

and add slider directive that's all.

<ul class="rslides" slider>...

UPDATE

you can modify this to reuse this directive more efficiently.

attr data-slider-class-selector class name that plugin gonna initialize.

attr data-slider-refresh-on-watch $scope property name if this property change plugin will initialize again. in this case $scope.photos will change after sometime (after ajax call) so u need to initialize the plugin after ajax call. so you can watch the photos from directive and initialize the plugin after photos available.

<ul class="rslides" data-slider-class-selector="rslides" data-slider-refresh-on-watch="images" slider>

Then get those new attribute values in the directive and use them ,

app.directive('slider', function() {
    var linker = function(scope, element, attr) {

    // get the value of data-slider-class-selector
    var selector = attr.sliderClassSelector;

    // get the value of data-slider-refresh-on-watch
    var watchSelector = attr.sliderRefreshOnWatch;

    scope.$watch(watchSelector, function() {
        $('.'+selector).responsiveSlides({
          auto: true,
          pager: true,
          speed: 500,
          timeout: 2000,
          maxwidth: 540
        });
      });      
  };

  return {
    restrict: "A",
    link: linker
  }
});

here is a simple demo Plunker

Jayantha Lal Sirisena · Accepted Answer · 2015-04-02 05:37:02Z

1

Best way is to create a directive , but you can simply fix it like this. Here we are waiting angular to render all the elments before creating the slides.

kingaApi.Photo.getFeaturedPhotos()
      .success(
      function (response) {
        $scope.photos = response.photos

        setTimeout(function(){
             $(".rslides").responsiveSlides();
        })

      })
      .error(function (response){
        switch(response && response.code) {
          default:
            console.log("error", response )
            // $scope.errors.usernameErrors.push('An error occurred.');
        }
    });

answered Apr 2, 2015 at 5:37

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Collectives™ on Stack Overflow

using external library with angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related