Directives are markers on a DOM element that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children.
There are many jQuery plugins which we often need in angularjs , I was using image slider plugin http://pgwjs.com/pgwslider/
in my project which I am discussing here. One of the classical way of plugin initialization is
|
1 |
$(document).ready(function() { $('.pgwSlider').pgwSlider(); }); |
which should not use in angular so there are different ways we can initialize the plugin in angularjs
First one via $viewContentLoaded: this event is emitted every time the ngView content is reloaded and should provide similar functionality as the document.ready when routing in angularjs
|
1 2 3 |
$scope.$on('$viewContentLoaded', function(){ jQuery('.pgwSlideshow').pgwSlideshow(); }); |
In this case you may need a timeout function.
And the another way using Directive:
|
1 2 3 4 5 6 7 8 9 10 |
.directive('pgwSlider', function() { return { // Restrict it to be an attribute in this case restrict: 'A', // responsible for registering DOM listeners as well as updating the DOM link: function(scope, element, attrs) { $(element).pgwSlideshow(scope.$eval(attrs.pgwSlider)); } }; }); |
And then we need to put the name of this directive on the html element where we need to use the plugin.
Recent Comments