Directive is a core feature in AngularJS framework and the framework provides different directives like ng-repeat, ng-bind, ng-controller. As directives are an important part of
AngularJS, we will have quite a few articles on it. Directives are directly used in HTML, this basically adds the vocabulary to your HTML. By using directives in your HTML, your HTML gives you nice readability from developer’s point of view. In this article we will create our own custom directives in AngularJS. AngularJS directives give you cross-browser, web-component like functionality today. I actually believe that AngularJS directives are more powerful and once you understand them it becomes easier to write web components!
AngularJS provides support to create custom directives for the following type of elements.
Element directives
Attribute
CSS
Comment
Most commonly the directives are restricted to element and attribute.
Creating Custom Directive
Creating a custom directive is simple. Directives are defined using “directive” function. Let’s see how can we create our own directive.
var app = angular.module("app", []);
app.controller('StudentController', function($scope) {
var students=[];
var student1={};
student1.firstName="John";
student1.lastName="David";
students.push(student1);
var student2={};
student2.firstName="Michael";
student2.lastName="Jackson";
students.push(student2);
$scope.students=students;
});
app.directive('student', function() {
//define the directive object
var directive = {};
//restrict = E, implies that directive is Element directive
directive.restrict = 'E';
//element will be replaced by this text/html
directive.template = "FirstName: <b>{{student.firstName}}</b> , LastName: <b>{{student.lastName}}</b>";
var linkFunction = function($scope, element, attributes) {
element.css("background-color", "#00ff00");
}
directive.link=linkFunction;
return directive;
});
So in the above code we have first declared our module then the controller and then the directive. Lets discuss the directive portion.
restrict attribute specifies where this directive will be applied in a HTML.
Currently it is set to ‘E’ so it will be implied as an element as you can see in the HTML.
The restrict option is typically set to:
'A' - This only matches the attribute name
'E' - This only matches element name
'C' - This only matches class name
These restrictions can also be combined as needed:
'AEC' - This matches either attribute or element or class name
Next is template. Use this attribute to place your text/html so when this directive is seen anywhere in the HTML that block will be replaced by this HTML. Alternatively you can use templateUrl to point to some html file.
Next is link function. This is a very important function and it is linked with each element scope and you can get element specific data. You can use this function to get the element and do some operations like changing CSS. This function gives full control of the element to which currently directive is applied. So if you need DOM manipulation you can use the link function. So you can modify the element as desired in your scenario. As in the above example I have changed the CSS by setting the background color
Here is the HTML
<head>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Custom Directive Demo</h1>
<div ng-controller="StudentController">
<div ng-repeat="student in students">
<student></student>
</div>
</div>
</body>
</html>You can view the full source code here.
So in this article I have shown you how you can create your own custom directives using some simple steps. In the next article I will go deep in the directives by explaining some more concepts attached to it.