Cycle2 slider using AngularJS directive

Question

Cycle2 slider using AngularJS directive

I need help for creating a cycle2 slideshow using directive. I found this code on the internet an copied on my local machine to test it, but it doesn't seem to work at all.

I get this error:

 Uncaught ReferenceError: angular is not defined slide.js:1
 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js%3A17%3A431) angular.js:36
 GET https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140216/jquery.cycle2.js.map 404 (Not Found) cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140216/jquery.cycle2.js.map:1

This is the code: http://codepen.io/funkybudda/pen/oACkf

Thank you.

javascript
angularjs
jquery-cycle2

Answer 1

That example will work if you have a small sample set of repeat items but the timeout is a bit of a hack. When you have a larger set the cycle plugin will not work unless there are child items so you need to initiate the plugin AFTER the ng-repeat is complete. I'd recommend a directive like this for the child items.

app.directive('jquerySliderSlide', function(){
  return{
    restrict: 'A',
    link: function(scope, element, attrs){ 
        scope.$watch('$last', function(v){
            if(v){
                //initiate the plugin on the parent
                element.parent().cycle();
            }
        });
    }
  }
});