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