AngularJS directives and custom directives

Angular is very popular JavaScript framework and custom directives are the heart of the angular. We will take look at the directives.

Angular directive

Directives are the command, tells angular what operations can angular do on the DOM element, attribute or the children of the element. These angular directives extend the HTML attributes. Angular directives are prefixes by ng-. Following are the some popular directives by angular.

ng-app: It initializes the angular application.

ng-init: It initializes the data of application.

ng-model: It provides the access to the model data for binding to the HTML controls.

For example

<div ng-app="firstApp" ng-init="firstName='John'">
<p>This is angular js application</p>
Change the name: <input type="text" ng-model="firstName" />
<p>My name is {{firstName}}

In above example firstApp is the name of the angular application. The name is not mandatory. You can keep blank as well. Next attribute is ng-init which initializes the data used by the application. By using the ng-model textbox can change the value of the firstName variable defined in the model. And finally we have used {{firstName}} to display the actual value of the variable.

Angular custom directives

In the above section we have seen the directives provided by the angular framework. Angular can also give you power to extend the directives. You can create and define your own directives.

Take a basic example below.

angular.directive('myStudent', function(){
        template: 'Name: {{firstName}} {{lastName}} <br />Roll No: {{rollNumber}} <br />Address: {{address}}'

In above script we have created directive of name ‘student’. Every directive should return the object. Here we are returning the object with the template field. The value of template contains the html content. When we use the student directive, it is replaced with the html content provided as template.

You can use directive like

<div my-student></div>

Here we have used attribute ‘my-student’. Directives in angular are named as camelCase. We can use the directive in DOM by delaminating words with dash.

You can see something like this.

John Cart

Extending template property

If your template contains lots of the html content then it will not feasible to provide like above method. You can also provide the template URL which contains the URL of the html page you want to use for the template.

angular.directive('student', function(){
        template: 'studentTemplate.html'

Restrict property

Restrict is another option you can use in the directive definition. Following are the possible values for the restrict option.

  • A – defines the attribute directive
  • E – defines the element directive
  • C – defines the CSS class directive

You can combine the above values for you need. By default if you don’t provide any values just like above examples, directive take ‘AE’ value. In this case you can define directive on the attribute level and also element level.

angular.directive('student', function(){
        template: 'studentTemplate.html'
        restrict: 'E'

4 thoughts on “AngularJS directives and custom directives

Leave a Reply

Your email address will not be published. Required fields are marked *