Use AngularJS to extend HTML functionality in custom directives. Functional definition of "instructions" used by custom directives. The custom directive just replaces the element it is activated. During the boot process, the AngularJS application finds the matching element, and uses the custom directive compile() method for one activity and then processes the elements using the custom directive link() method based on the instruction range. AngularJS provides support to create custom directives with the following elements of the type.
Element directives - Activate a matching element when the directive encounters.
Attribute - - Activate a matching attribute when the directive encounters.
CSS - - Activate matching CSS styles when the instruction encounters.
Comment - - Activate matching comments when the directive encounters.
Understand custom commands
Define custom HTML tags.
<student name="Mahesh"></student><br/>
<student name="Piyush"></student>
Define custom directives to handle the above custom HTML tags.
var mainApp = angular.module("mainApp", []);//Create a directive, first parameter is the html element to be attached. //We are attaching student html tag. //This directive will be activated as soon as any student element is encountered in htmlmainApp.directive('student', function() { //define the directive object var directive = {}; //restrict = E, signifies that directive is Element directive directive.restrict = 'E'; //template replaces the complete element with its text. directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>"; //scope is used to distinguish each student element based on criteria. directive.scope = { student : "=name" } //compile is called during application initialization. AngularJS calls it once when html page is loaded. directive.compile = function(element, attributes) { element.css("border", "1px solid #cccccc"); //linkFunction is linked with each element with scope to get the 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 the controller to update the scope as the instruction. Here we use the name attribute value as the scope of the child.
mainApp.controller('StudentController', function($scope) { $scope.Mahesh = {}; $scope.Mahesh.name = "Mahesh Parashar"; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = "Piyush Parashar"; $scope.Piyush.rollno = 2;});example
<html><head> <title>Angular JS Custom Directives</title></head><body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp" ng-controller="StudentController"><student name="Mahesh"></student><br/><student name="Piyush"></student> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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 #cccccccc"); 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.Mahesh = {}; $scope.Mahesh.name = "Mahesh Parashar"; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = "Piyush Parashar"; $scope.Piyush.rollno = 2; }); </script></body></html>result
Open textAngularJS.html in a web browser. The results are as follows:
The above is the compilation of AngularJS's custom command information, and we will continue to add it later. Thank you for your support for this site!