AngularJS Directive Tutorial
View more Tutorials:
What is the Directive in AngularJS? There are many answers to this question that you can find on Google. But it's too lengthy, and I like a shorter answer.
- Directive is an instruction for you to create a "The New". "The New" herein can be a new tag or create a new attibute for a tag, or a new CSS tag, or a Comment .
- And Directive shows AngularJS how to convert "The New" into HTML code that the browser can understand.
Example, I create a Directive called "helloWorld" to define a new <hello-world> tag, and I use this tag in HTML file. A browser obviously does not understand this tag, but when the file is run in the browser, AngularJS will rely on the above Directive instructions to convert the <hello-world> tag into HTML that the browser can understand.
Directive E (Element):
Nothing is better than starting with an example. How can I create a new tag?
On any folder you create 2 directive-e-example.html & directive-e-example.js files:
directive-e-example.js
// Create an Application named "myApp"
var app = angular.module("myApp", []);
// Create a Directvie named "helloWorld"
app.directive("helloWorld", function() {
return {
restrict : "E",
template : "<h1>Hello World!</h1>"
};
});
In the above Javascript , firstly, create a module (app), then create a Directive named helloWorld for this module . The name of a Directive has to be in accordance with the camelCase rules.
- TODO Link!
directive-e-example.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directive</title>
<!-- Check version: https://code.angularjs.org/ -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="directive-e-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Directive E (Element):</h3>
<hello-world></hello-world>
</div>
</body>
</html>
Open the directive-e-example.html file on browser, and you have the following result:
Directive A (Attribute)
In this example, I will create an attribute named good-bye for a tag of HTML:
We will create 2 directive-a-example.html & directive-a-example.js files:
directive-a-example.js
// Create an Application named "myApp"
var app = angular.module("myApp", []);
// Create a Directvie named "helloWorld"
app.directive("goodBye", function() {
return {
restrict : "A",
template : "<h1>Good Bye!</h1>"
};
});
directvie-a-example.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directive</title>
<!-- Check version: https://code.angularjs.org/ -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="directive-a-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Directive A (Attribute):</h3>
<div good-bye></div>
</div>
</body>
</html>
Open the directive-a-example.html file on browser and receive the result:
Directive C (Class)
directive-c-example.js
// Create an Application named "myApp"
var app = angular.module("myApp", []);
// Create a Directvie named "errMessage"
app.directive("errMessage", function() {
return {
restrict : "C",
template : "<h1>Something Error!</h1>"
};
});
directive-c-example.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="directive-c-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Directive C (Class):</h3>
<div class="err-message"></div>
</div>
</body>
</html>
Directive M (Comment)
directive-m-example.js
// Create an Application named "myApp"
var app = angular.module("myApp", []);
// Create a Directvie named "myComment"
app.directive("myComment", function() {
return {
restrict : "M",
replace : true,
template : "<h1>OK Important!</h1>"
};
});
directive-m-example.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="directive-m-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Directive M (Comment):</h3>
<!-- directive: my-comment -->
</div>
</body>
</html>
Normally, when you create a Directive you have to provide a HTML content through the "template" property. If the HTML content is too long, it will be a problem. In this case, you should put this HTML content into a file, and then use the "templateUrl" property to point to the position of such file .
In this example, I have a data which is tasks to be done and I will create a Directive named "myTodoList". The data will be displayed like the following illustration:
todo-template.html
<div class="my-todo-list">
<h1>{{title}}</h1>
<div ng-repeat="todo in todoList">
<input type="checkbox" ng-model="todo.completed"> {{todo.name}}
</div>
</div>
todo-example.js
var app = angular.module("myApp", []);
var ctrl = app.controller("myCtrl", function($scope) {
$scope.todoDatas = [
{name: 'Create a custom directive', completed: true},
{name: 'Learn about restrict', completed: true},
{name: 'Master scopes', completed: false}
];
});
// Create a Directive named "myTodoList"
// E: Element <my-todo-list todo-list="=" title="@">
app.directive("myTodoList", function() {
return {
restrict : "E",
templateUrl : "todo-template.html",
// '=' : an expression
// '@': a string
scope: {
todoList: '=',
title: '@'
}
};
});
todo-example.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="todo-example.js"></script>
<style>
.my-todo-list {
border: 1px solid #ddd;
padding: 5px;
margin: 5px;
width: 320px;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>Custom Directive with templateUrl</h2>
<!-- $scope.todoDatas -->
<my-todo-list todo-list="todoDatas" title="My Todo List"/>
</div>
</div>
</body>
</html>
You need to run the todo-example.html file on a HTTP Server, which is mandatorybecause templateUrl requires that data source must be from http or https. It doesn't accept data source, coming from file:///.
OK, I will explain the code of the above example
The above illustration shows that we are creating a Directive named "myTodoList". It's like you create a new <my-todo-list> tag with two todo-list & title attributes.
- '@' implies that it is a String.
- '=' implies that it is an Expression.
