Dot Net Stuff

Defining Directives (Custom) in Angular JS Application


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.

...

Products

</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.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and Module.run methods.

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.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus