In the previous post, we created a simple directive to manipulate the DOM’s behavior. In this post, we are going to describe the directive properties.
Directive Properties
Earlier we looked at the usage of template and templateUrl properties. Now we are going to look at the other directive properties.
- restrict: This property Determines where a directive can be used (as an element, attribute, CSS class, or a comment).
- scope : Used to create and isolate the scope.
- template : Defines the content that should be output from the directive. Can include HTML, data binding expressions, and even other directives.
- templateUrl : Provides the path to the template that should be used by the directive.
- controller : Used to define the controller associated with the directive template.
- controllerAs : Controller alias at the directive scope.
- priority : Used to specify the order in which the directives are applied when there are multiple directives defines on a single DOM element.
- link : Defines the function used for DOM manipulation tasks.
- compile : The compile function deals with transforming the template DOM.
- transclude: Extract the contents of the element where the directive appears and make it available to the directive. The contents are compiled and provided to the directive as a transclusion function.
You can check the official Angular documentation for more details.
Restriction in Directives
When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option.
Angular provides different options to restrict the usage of directives.
Following section demonstrates the usage of the restrict options.
‘A’ – This directive is applied only when attribute name is matched.
|
1 |
<div my-directive="expression"></div> |
‘E’ – This directive is applied only when element name is matched.
|
1 |
<my-directive></my-directive> |
‘C’ – This directive is applied only when class name is matched.
|
1 |
<div class="my-directive:expression;"></div> |
‘M’ – used in a comment.
|
1 |
<!-- directive: my-directive expression--> |
We can also combine these restrictions as needed:
‘AEC’ – matches either attribute or element or class name
Syntax for Using Directive properties
Following script demonstrates the syntax for using directive properties. You don’t have to use all of these properties to create a directive. You can use these directive properties depending on your requirement.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var app = angular.module('moduleName', []); app.directive('directiveName', function () { return { restrict: 'EA', //E = element, A = attribute, C = class, M = comment scope: { }, templateUrl: 'mytemplate.html', controller: function() { }, //define controller in the directive link: function () { } } }); |
Using Directive Properties
The following example demonstrates the usage of above-mentioned properties to create a directive called myEmployee.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var app = angular.module('mainApp', []); app.directive('myEmployee', function() { return { restrict: 'EA', scope:{}, //isolate scope. link: function(){ alert("Hello, I'm working."); }, template: "<div>My First Directive.</div>" }; }); |
We can use the myEmployee directive as an attribute or element. We use link function in the above example to alert a message.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <title>AngularJS Custom Directive Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-app="mainApp"> <div my-employee></div> </div> </body> </html> |
You will see the following output in your browser.
That’s all for now and we will look deeper into these properties in the coming posts.