Custom Directives in angular JS - Part : 1

Introduction :

Directives in angular JS is the key concept, which can provide an additional behavior/feature to the HTML element. The main or major directives which usually a beginner even might be knowing is ng-app or else ng-controller as those are the base things to bootstrap and consume the angular things.
Here comes a point, is it possible to create our own directives with a certain behavior adding based on our requirement. Yes, angular enabled the feature to create our own directives.
You might be wondering, as like why should I create a custom directive, as we are having lot of properties or features existing. Assume we may get an element with certain behavior which we got need to have an in lot of places of our project, In that scenario instead of writing its logic and accessing, just we can create our own directive and use it as an HTML element or an attribute or even as a class wherever we required.
Remember a thing that our custom directive can act as a directive or css classes or element.

Syntax of custom directive :

app.directive('ngMyDirective', function () {

          return { //Related key value pairs to generate directive }

       });

Custom directive is the function of the module which contains 2 parameters.

Former is for declaring or providing the name of the directive. Angular suggested us the naming convention for providing the directive name. For example if we want our directive in view to be as “ng-my-directive”, then our directive name should be as “ngMyDirctive”.
            The second parameter is function that which returns object with its properties as like restrict , template,..etc.
Now, let’s discuss about the key-value pairs that what are required to create the custom directive in the directive return object as follows :

Using template key in custom directive :

Template is the one which is used to provide/repplace the text of the creating element with the data that what we required. We can also consume the model related data in template.
Sample Look :

app.directive('ngMyDirective', function () {

            return { template: '<h5>Hi Im from ngMyDirective.</h5>' }

        });

Using restrict key in custom directive :

Restrict key is the one which we define as a key in directive return object, will confirms that how our directive needs be act like an element or as an attribute or as a class.

restrict as E :

If we define the value of restrict as “A” means that particular directive is allowed to behave as an element’s attribute.

Example:

app.directive('ngMyDirective', function () {

             return {

                restrict: 'E', 

                template: '<h5>Hi Im from ngMyDirective.</h5>'

             }

          });

In View :

<ng-my-directive>  </ng-my-directive>

restrict as “A” :

If we define the value of restrict as “A” means that particular directive is allowed to behave as an element’s attribute.

Example:

app.directive('ngMyDirective', function () {

            return {

                restrict: 'A',

                template: '<h5>Hi Im from ngMyDirective.</h5>'

           }

        });

In View :

<div ng-my-directive>  </div>

restrict as “C” :

If we define the value of restrict as “C” means that particular directive is allowed to behave as an class of an element.
Example :

app.directive('ngMyDirective', function () {

             return {

                restrict: 'C',

                template: '<h5>Hi Im from ngMyDirective.</h5>'

            }

         });

In View :

<div class="ng-my-directive"></div> 

Multi-feature to a directive by restrict :

Yes, some times we may feel that our directive needs to act as an element or tag and as an attribute so, Multiple options or behavior of directive can also be allowed means we can provide “MA” which allows comment and attribute type of directive or “EA”, which allows element or attribute type of directives and so on combinations.

Example:

app.directive('ngMyDirective', function () {

            return {

                restrict: 'CE',

                template: '<h5>Hi Im from ngMyDirective.</h5>'

            }

         });

In the above case the custom directive “ng-my-directive” can act as an value of a class to an element or it can also act a direct HTML tag/element.

Scope members accessing in custom directive :

In the custom directive, we can also access the scope members related data which is defined in the controller. Let’s build an example on custom directive with scope member.

Script Code :

<script type="text/javascript">

   var myapp = angular.module('myapp', []);

           myapp.directive('ngMyDirective', function () {

           return {

                restrict: 'MAE',  //can be with "A","E","C" or "M"

                template: '<h5>Hi Im {{FirstName}} from ngMyDirective.</h5>'

           }

        });

        myapp.controller("myctrl", ["$scope", function ($scope) {

        $scope.FirstName = "Sreekanth";

  }]);

</script>

View Code :

<body ng-app="myapp" ng-controller="myctrl">

<ng-my-directive></ng-my-directive>

</body>

Result :

Explanation :

If we observe the script, within the directive function, for the template key I had used the expression {{FistName}}. The declaraion or definition had been taken place in the controller where I had given as $scope.FirstName=”sreekanth”.
These are the basic concepts to create the custom directive. In my next article we’ll dig a bit on using custom directive concept.

continued in followed link : Custom Directives part-2