English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Use custom instructions in AngularJS to extend the functionality of HTML. Define custom instructions using the 'directive' feature. Custom instructions only replace the activated elements. During the boot process, the AngularJS application finds matching elements and uses theircompile()The custom instruction method performs one activity, thenlink()Use the method of custom instruction to handle the element according to the scope of the instruction. AngularJS supports creating custom instructions for the following types of elements.
Element instruction −The instruction will be activated when a matching element is encountered.
Attribute −The instruction will be activated when a matching attribute is encountered.
CSS −The instruction will be activated when a matching CSS style is encountered.
Comment −The instruction will be activated when a matching comment is encountered.
Define a custom html tag.
<student name = "Sea"></student><br/><student name="Piyush"></student>
Define a custom instruction to handle the above custom html tags.
var mainApp = angular.module("mainApp", []);
//Create an instruction, the first parameter is the html element to be attached.
//We will attach the student html tag.
//Once any Student element is encountered in html, this instruction will be activated
mainApp.directive('student', function() {
//Define an instruction object
var directive = {};
//limit = E indicates that this instruction is an Element instruction
directive.restrict = 'E';
//The template replaces the complete element with its text.
directive.template = "Student: <b>{{student.name}}</b> ,
Roll No: <b>{{student.rollno}}</b>/b>";
//scope is used to differentiate each student element based on conditions.
directive.scope = {
student : "=name"
}
//compile is called during the application initialization. AngularJS calls
it once when the html page is loaded.
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
//linkFunction links each element with the scope to obtain element-specific data.
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> ,
Roll No: <b>"+$scope.student.rollno+"</b><br/>
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});Define a controller to update the scope of the directive. Here, we use the value of the name attribute as the child scope.
mainApp.controller('StudentController', function($scope) {
$scope.Sea = {};
$scope.Sea.name = "Sea Gull";
$scope.Sea.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Gull";
$scope.Piyush.rollno = 2;
});<html>
<head>
<title>AngularJS-Custom directive</title>
</head>
<body>
<h2>AngularJS-Custom directive example</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
<student name = "Sea"></student><br/>
<student name = "Piyush"></student>
</div>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('StudentController', function($scope) {
$scope.Sea = {};
$scope.Sea.name = "Sea Gull";
$scope.Sea.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Gull";
$scope.Piyush.rollno = 2;
});
</script>
</body>
</html>Test and see‹/›Output Results
Open in web browsertextAngularJS.htm. View results.