Subscribe via RSS Feed

jQuery Plugin under Angular.js Directive – a more clean html approach

July 1, 2013 6 Comments

angular-jquery-image-slider

In previous article, we have described about building a jQuery Plugin from scratch. We will describe a clean approach to make clean html with Angular.js Directive which will wrap the functionality of the above JQuery plugin. This plugin is already configurable for the image moving direction – left, right, up and down.

What is Angular.js Directive ? 

Directly from angularjs.org  -

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

In a more simple way what we have understood that, we can introduce new html tags binding with our rules, in web page, under Angular.js wrapper. Also we can always separate and minimise the use of javascript code in a html page. Another thing that we have learned from this exercise is, we can use existing jQuery complex plugins with minimal tweaks within Angular.js framework wrapper.

Now we should go to the code. As our previous articles, we will comment within the codes of HTML and Javascript.

Main HTML Code Snippet

<div class="example" >
    <div image-slider slider-id ="'slider'" time-interval="3000" my-direction="'down'" >
    <!-- imageSlider is our angular directive name -->
    <!-- sliderId, timeInterval, myDirection are three variables for the UL id on which the plugin will run, -->
    <!-- timeInterval after which the plugin will run and the direction on which the images will slide -->
        <ul id="slider">
            <li><img src="Chrysanthemum.jpg" alt="" width="480" height="310"/><p>This is first slide</p></li>
            <li><img src="Desert.jpg" width="480" height="310" alt="" /><p>This is second slide</p></li>
        </ul>
    </div>
</div>

javascriptnosqlbook

Code in Angular way

angular.module('AngularSlider', [])
    .directive('imageSlider', function () { // Angular Directive Declaration
         return {
             restrict: 'A',                 // The Directive is with Attribute 
             scope: {
                 timeInterval: '=',         // three initializer variables
                 myDirection: '=',
                 sliderId: '='
             },
             link: function (scope, elem, attrs) {
                 $('#'+scope.sliderId).plainSlider(scope.myDirection,scope.timeInterval);
                 // calling the jQuery plugin method in link function for the particular DOM Element
             }
         }
    });

Note : The particular jquery plugin related information, which is used here, can be found in Simple jQuery Image Slider Plugin with minimal effects.

Our code can be found in Github.

Reference :

1> http://docs.angularjs.org/guide/directive

2> http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

We will come with some other concepts of Angular.js in our next articles.

So..keep reading…and if you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner