Directive not working for SlidesJS jQuery plugin in AngularJS project

Question

I have created an AngularJS project via Yeoman and I finally got my Angular modules and directives straightened out but my directive code doesn't seem to be instantiating correctly so the slideshow jQuery plugin isn't working but if I go onto the console and run

$('#slideshow').slides()

The slideshow functionality seems to work minus the CSS....

My slides.js that houses my directive for wrapping the jQuery plugin is

'use strict';

angular.module('slidesjs', [])

.directive('slidesjs', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            angular.element(element).slides(scope.$eval(attrs.slides));
        }
    };
});

My main.html is

<div id='slideshow' slides>
<div class="jumobotron" ng-repeat="msg in messages | reverse">
  <img class="img-responsive" ng-src="[URL]"/>
</div>
</div>

The plugin I want to use is available at this website

I have modified my app.js to the following

'use strict';

angular.module('App', [
  'firebase',
  'angularfire.firebase',
  'angularfire.login',
  'simpleLoginTools'
])

.controller('MainCtrl', ['$scope', '$firebase',
    function ($scope, $firebase) {
      var ref = new Firebase('[URL]');
      $scope.images = $firebase(ref.endAt().limit(5)).$asArray();
    }])

.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
})

.directive('mySlides', function() {
    return{
      restrict: 'A',
      link: function(scope, element, attrs, ctrl) {
        scope.$watch(attrs.mySlides, function(value) {
          setTimeout(function() {
            if (value.length > 0) {
              $(element[0]).slidesjs({
                preload: true,
                preloadImage: '/content/images/theme/loading.gif',
                play: attrs.play || 5000,
                pause: attrs.pause || 2500,
                start: attrs.start || 1,
                hoverPause: attrs.hoverPause || true,
                navigation: { active: true, effect: "slide" }
              });
            }
          }, 1);
        });
      }
    };
})
;

Community · Accepted Answer · 2017-05-23 12:05:49Z

0

A few observations about your attempt to help you learn before I answer:

You'll want to do some sort of watching in your directive in case the slides change. Your single $eval isn't enough. Use scope.$watch or attrs.$observe to accomplish this, depending on what you need to do - I'd google, read the official docs/API, etc. to learn this.
You'll want to change your view as attrs.slides will be the value of the attribute (possibly interpolated) and right now you have none. so what I mean is slides="[this is the value interpolated by attrs.slides]".
I think the jQuery call for that library is slidesjs() not slides().

Okay having said all that, I'd look at this plunker - I think someone's already done this integration with Angular (stolen from this answer):

http://plnkr.co/edit/4qdUctYMIpd8WqEg0OiO?p=preview

Directive

app.directive('mySlides', function() {
  var directive = {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      scope.$watch(attrs.mySlides, function(value) {
        setTimeout(function() {
          // only if we have images since .slidesjs() can't
          // be called more than once
          console.log("attrs.start is:");
          console.dir(attrs.start);
          if (value.length > 0) {
            $(element[0]).slidesjs({
              preload: true,
              preloadImage: '/content/images/theme/loading.gif',
              play: attrs.play || 5000,
              pause: attrs.pause || 2500,
              start: attrs.start || 1,
              hoverPause: attrs.hoverPause || true,
              navigation: { active: true, effect: "slide" }
            });
          }
        }, 1);
      });
    }
  };
  return directive;
});

Controller

$scope.images = [
    { url: "http://slidesjs.com/img/example-slide-350-1.jpg" },
    { url: "http://slidesjs.com/img/example-slide-350-2.jpg" },
    { url: "http://slidesjs.com/img/example-slide-350-3.jpg" },
    { url: "http://slidesjs.com/img/example-slide-350-4.jpg" }
  ]

HTML

<div my-slides="images" start="4">
  <img ng-repeat="image in images" ng-src="{{image.url}}" />
</div>

If you need more help on this it would help me and others if you set up a plunker or something showing where you're stuck.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Sep 16, 2014 at 1:34

Jesus is Lord

15.5k11 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DeucePie Over a year ago

What is the purpose of the controller? setting the initial state of the images? I have no images to begin with and newer images get added dynamically via firebase. Do I need to use the controller in my case?

DeucePie Over a year ago

How come the directive is mySlides but the HTML it is my-slides... I thought it had to be the same for it to work?

Jesus is Lord Over a year ago

@DeucePie The controller adds non-directive JavaSript functionality to your view. I've not used firebase but if it's dynamic and not fixed then you probably need a directive if it's common or a controller if the functionality is specific to a view.

Jesus is Lord Over a year ago

@DeucePie you put the string mySlides when you declare the directive, but then you use my-slides when you consume the directive. They are the "same" - just angular has a one-to-one transformation it does.

Jesus is Lord Over a year ago

@DeucePie On a side note those are different question, imho.

Collectives™ on Stack Overflow

Directive not working for SlidesJS jQuery plugin in AngularJS project

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related