Directives are the most powerful AngularJS feature because they extend and enhance HTML to create rich web applications. There are lots of features to like in AngularJS, but directives are the most enjoyable and flexible to create. We have already discussed about the built-in directives that come with AngularJS, but we can also create our own custom directives when the built-in ones don’t meet your needs. We can create custom directives via the Module.directive method. You can see a simple example of a custom directive below.
Why and When to Create Custom Directives
You can create a custom directive whenever the built-in directives don’t meet your needs, when you want to express complex functionality in code rather than in HTML, or when you want to create a self-contained unit of functionality that you can use in multiple AngularJS applications.
Creating a Custom Directive in Angular JS Example
We are going to start with a simple example to demonstrate how custom directives are created, just to outline the basic features. Our initial goal will be to create and apply a directive that will generate an ul element that contains an li element for each object in the products array. We will walk through the process step-by-step in the sections that follow.
Defining the Directive
Directives are created using the Module.directive method, and the arguments are the name of the new directive
and a factory function that creates the directive. In following example, you can see how we have added a directive called unorderedList to the directives.html file. This directive doesn’t do anything at the moment, but it allows us to explain some important points as we build the functionality in the sections that follow.
...
…
Applying a Custom Directive in Angular JS Application
The first argument that we passed to the directive method set the name of the new directive to unorderedList.
Notice that we have used the standard JavaScript case convention, meaning that the u of unordered is lowercase and the L of list is uppercase. AngularJS is particular when it comes to names with mixed capitalization. You can see this in following code block, which shows how we have applied the unorderedList directive to an HTML element.
...
</body>
...
We have applied the directive as an attribute on a div element, but notice how the name of the attribute is different from the argument We passed to the directive method: unordered-list instead of unorderedList. Each uppercase letter in the argument passed to the method is treated as a separate word in the attribute name, where each word is separated by a hyphen.
We have set the value of the attribute to the name of the array whose objects we want to list, which is products in
this case. Directives are intended to be reusable within and across applications, so you avoid creating hardwired
dependencies, including references to data created by specific controllers.
Implementing the Link Function in Angular JS Application
The worker function in the directive we created is called the link function, and it provides the means to link the directive with the HTML in the document and the data in the scope. (There is another kind of function associated with directives, called the compile function). The link function is invoked when AngularJS sets up each instance of the directive and receives three arguments:
- the scope for the view in which the directive has been applied
- the HTML element that the directive has been applied
- and the attributes of that HTML element.
The convention is to define the link function with arguments called scope, element, and attrs. In the sections that follow.
Getting Data from the Scope
To get the data from the scope, We need first to get the value of the attribute. The third argument to the link function is a collection of attributes, indexed by name. There is no special support for getting the name of the attribute used to apply the directive, which means we use the incantation in following example to get the data from the scope.
...
angular.module("exampleApp", [])
.directive("unorderedList", function () {
return function (scope, element, attrs) {
var data = scope[attrs["unorderedList"]];
if (angular.isArray(data)) {
for (var i = 0; i < data.length; i++) {
console.log("Item: " + data[i].name);
}
}
}
})
...
Generating the HTML Elements
The next step is to generate the elements We need from the data objects. AngularJS includes a cut-down version of jQuery called jqLite. It doesn’t have all of the features of jQuery, but it has sufficient functionality for working with directives. Following are the sample code block to generate HTML Elements in a Custom Directive.
...
angular.module("exampleApp", [])
.directive("unorderedList", function () {
return function (scope, element, attrs) {
var data = scope[attrs["unorderedList"]];
if (angular.isArray(data)) {
var listElem = angular.element("");
element.append(listElem);
for (var i = 0; i < data.length; i++) {
listElem.append(angular.element('- ').text(data[i].name));
}
}
}
})
...
As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.
Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.