Sunday, 20 December 2015

Custom directive in AngularJS



How can we create a custom directive in Angular?
Till now we have looked in to predefined Angular directives like “ng-controller”, ”ng-model” and so on. But what if we want to create our own custom Angular directive and attach it with HTML elements as shown in the below code.
<div id=footer company-copy-right></div>
To create a custom directive we need to use the “directive” function to register the directive with angular application. When we call the “register” method of “directive” we need to specify the function which will provide the logic for that directive.
For example in the below code we have created a copy right directive and it returns a copy right text.
Please note “app” is an angular application object.
app.directive('companyCopyRight', function ()
{
return
{
        template: '@CopyRight questpond.com '
 };
});
The above custom directive can be later used in elements as shown in below code.
<div ng-controller="CustomerViewModel">
<div company-copy-right></div>
</div>


What kind of naming conventions is used for custom directives?
For angular custom directive the best practice is to follow camel casing and that also with at least two letters. In camel case naming convention we start with a small letter, followed by a capital letter for every word.
Some example of camel cases are “loopCounter”, “isValid” and so on.
So when you register a custom directive it should be with camel case format as shown in the below code “companyCopyRight”.
app.directive('companyCopyRight', function ()
{
return
{
        template: '@CopyRight questpond.com '
 };
});
Later when this directive is consumed inside HTML before each capital letter of camel case we need to insert a “-“ as specified in the below code.
<div company-copy-right></div>
If you are making a one letter prefix like “copyright” it’s very much possible that tomorrow if HTML team creates a tag with the same name, it will clash with your custom directive. That’s why angular team recommends camel case which inserts a “-“ in between to avoid further collision with future HTML tag’s.


What are the different custom directive types in AngularJS?
There are different flavors of Angular directives depending till what level you want to restrict your custom directive.
In other words do you want your custom directive to be applied only on HTML element or only on an attribute or just to CSS etc.
So in all there are four different kinds of custom directives:
1)    Element directives (E)
2)    Attribute directives (A)
3)    CSS class directives (C)
4)    Comment directives (M)
Below is a simple custom directive implementation at the element level.
myapp.directive('userinfo', function()
{
    var directive = {};
    directive.restrict = 'E';
    directive.template = "User : {{user.firstName}} {{user.lastName}}";
    return directive;
});
The “restrict” property is set to “E” which means that this directive can only be used at element level as shown in the code snippet below.
<userinfo></userinfo>
If you try to use it at an attribute level as shown in the below code it will not work.
<div userinfo></div>
So “E” for element, “A” for attribute, “C” for CSS and “M” for comments.


What if I want custom directives to be applied on element as well as attributes?
directive.restrict = 'EA';


Can I set an Angular directive template to a HTML web page?
Yes, you can set template to page directly by using “templateUrl” property of the directive as shown in the code snippet below.
directive.templateUrl = "/templates/footer.html";



No comments:

Post a Comment