Overview Of AngularJS Custom Directives

Directives in Angular JS

Directives in AngularJS are prefixed with ‘ng-‘. Basically, these directives are included in the HTML elements or tags, like an attribute. By using these ng-directives as attributes of HTML elements, we can provide a special feature to the particular HTML element.

In other words, we can say that these directives behave as markers on the HTML DOM element attributes. Directives speak to the HTML Compiler of AngularJS to attach a specified behavior. $Compile is the one which compiles the Angular code from the DOM. The custom directives are used to create our own directives.

Creating a custom directive

var app = angular.module('Customers', [])
app.controller('CustomerDetails', function ($scope) {
        $scope.CustName = "Ravi";
});

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

});

In an Angular application, we can attach the method named “directive” for creating the custom directive. This directive method takes two parameters.

The first parameter accepts the name of the custom directive. From the above small snippet, we can find the directive name as 'customInfo'. According to the Angular standards, we must provide the directive name in camel case.

The second parameter accepts the function which always returns the JavaScript object. 

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

    return { template: "<strong>This is customor Info :{{ CustName }}</strong>" };

});

The returning object should always be included or assigned to a property named ‘template’ within the function. This returning gives out the HTML content.

Can we get $scope data into template ?

Yes, our template can even fetch the $scope data from the Controller. From the snippet, we can find “$scope.CustName = "Ravi";” within the Controller and that value of “CustName” can be accessed in the template within the expression as

“{{ CustName }}”.

The content which came from template will be injected inside the body of parent tag wherever we use that.

Note

While utilizing the custom directive, we have to separate the capital cases with hyphen (-).

For example, customInfo turns into custom-info.

Using the directive in HTML page

<div custom-info></div>

The above div tag in HTML page provides the content of template which we had given in the function of our custom directive.






templateurl in custom directive function

From our example, the returning template of content is very small data. Sometimes, we may face a scenario where large or complex data needs to be fetched.

In that situation, we can go ahead with preparing the whole template as a separate HTML page and pass the URL of that page as data for templateurl as follows. 

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

    return { templateurl : "complexcontent.html" };

});

Restrict in custom directive

In general, if we think of what the HTML page contains, we can speak about elements with concern attributes and if there are any attached classes and so on.

In the similar way, our custom directive can also be used in 4 possible ways- attributes, elements, classes, or comments.

The way of using our directive can also be defined within our directive method function to the property “restrict”.

Providing restrict for the above snippet.

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

    return {
    restrict : ‘E’,
template: "<strong>This is customor Info :{{ CustName }}</strong>"
};

});

From the above snippet, we can observe that restrict is provided with option “E”, hence the directive will act as element.

Restrict Type	Usinng Restrct to concern type
A(attribute)	<div custom-directive-name>…</div>
E(Element)	< custom-directive-name> …</ custom-directive-name>
C(class)	<div class=’ custom-directive-name’>…</div>
M(comment)	<---- custom-directive-name--- >

Even though the restrict types are divided into four types, yet based on the situation, we can use combinations too, as shown below.

 restrict : ‘AME’

Now, the above restrict can support either as attribute or as comment or as element.

That's it. Thanks for reading my article.