This tutorial uses AngularJs version: 1.5.3
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs download address: https://angularjs.org/
Abstract: Directive (instructions) The author believes that it is one of the very powerful and useful functions of AngularJ. It is equivalent to writing a public custom DOM element or CLASS attribute or ATTR attribute for us, and it is not just that, you can also manipulate scope, bind events, change styles, etc. on its basis. Through this Directive, we can encapsulate many public instructions, such as paging instructions, automatic completion instructions, etc. Then, you only need to write a single line of code in the HTML page to achieve many powerful functions. Generally speaking, Directive needs to be used to have the following scenarios:
1. Make your HTML more semantic and you don’t need to study the code and logic in depth to know the general logic of the page.
2. Abstract a custom component and reuse it elsewhere.
1. The definition of Directive and its usage method
The AngularJs directive definition is roughly as follows
angular.module("app",[]).directive("directiveName",function(){ return{ //Define by setting items}; })Directive can be placed in element names, attributes, classes, and comments. The following is the equivalent way to quote myDir, the directive. (But many directives are limited to the use of "properties")
<span <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span><span style="font-family: Arial, Helvetica, sans-serif;">="exp"></span>//Properties</span> <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>>//Element<!-- directive: <span style="font-family: Arial, Helvetica, sans-serif;">directive-name </span><span style="font-family: Arial, Helvetica, sans-serif;">exp -->//Notes</span>
The following example:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: '<div>Hi I am Lin Bingwen~~~</div>', replace: true }; }); </script> </html>result:
Below is a directive detailed version
var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } }; return directiveDefinitionObject; });2. Interpretation of Directive command content
You can see that it has 8 contents
1.restrict
(String) Optional parameters indicate the form of the instruction being declared in the DOM; the values are: E (element), A (attribute), C (class), M (notation), and the default value is A; of course, two can also be used together, such as EA. The representation can be either an element or an attribute.
[html] view plain copy View code fragments on CODE derived to my code fragment
E(element): <directiveName></directiveName>
A(Property): <div directiveName='expression'></div>
C (class): <div class='directiveName'></div>
M (Note): <--directive:directiveName expression-->
Generally speaking, E/A/C is used more frequently.
2.priority
(number), optional parameters, specify the priority of the instruction. If there are multiple instructions on a single DOM, the higher priority will be executed first;
3.terminal
(Boolean), optional parameter, can be set to true or false. If set to true, other instructions with a priority lower than this instruction will be invalid and will not be called (the one with the same priority will still be executed)
4.template (string or function) optional parameters, which can be:
(1) A piece of HTML text
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: '<div><h1>Hi I am Lin Bingwen~~~</h1></div>', replace: true }; }); </script> </html>(2) A function can accept two parameters tElement and tAttrs
where tElement refers to the element that uses this directive, and tAttrs is the attribute of the instance, which is a collection (object) composed of all the attributes on the element, such as:
<hello-world2 title = 'I am the second directive'></hello-world2>
The title is the attribute on the tattoos
Let's see what happens when template is a function
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> <hello-world2 title = 'I am the second directive'></hello-world2> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: '<div><h1>Hi I am Lin Bingwen~~~</h1></div>', replace: true }; }); app.directive("helloWorld2", function(){ return{ restrict:'EAC', template: function(tElement,tAttrs){ var _html = ''; _html += '<div>' +'hello '+tAttrs.title+'</div>'; return _html; } }; }); </script> </html>result:
You can see that the title field in the tag in hello-world2 is also used in the directive.
5.templateUrl (string or function), optional parameter, can be
(1) A string representing the path of the HTML file
(2) A function can accept two parameters tElement and tAttrs (approximately the same as above)
Note: During local development, you need to run a server, otherwise using templateUrl will cause a Cross Origin Request Script (CORS) error. Since loading html templates is loaded asynchronously, loading a large number of templates will slow down the website. Here is a trick, which is to cache the template first
You can load your index page and include the following code as part of your page.
<script type='text/ng-template' id='hello.html'> <div><h1>Hi I am Lin Bingwen~~~</h1></div> </script>
The id attribute here is set on templateUrl.
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', templateUrl: 'hello.html', replace: true }; }); </script> <script type='text/ng-template' id='hello.html'> <div><h1>Hi I am Lin Bingwen~~~</h1></div> </script> </html>Output result:
Another way to cache is:
app.run(["$templateCache", function($templateCache) { $templateCache.put("hello.html", "<div><h1>Hi I am Lin Bingwen~~~</h1></div>"); }]);Examples of use are as follows:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', templateUrl: 'hello.html', replace: true }; }); app.run(["$templateCache", function($templateCache) { $templateCache.put("hello.html", "<div><h1>Hi I am Lin Bingwen~~~</h1></div>"); }]); </script> </html>result:
In fact, the first method is better, it will be faster to write. The author has the most and the first method to write, which is directly included in scprit.
6.replace
(Boolean value), the default value is false. When set to true, let's take a look at the following example (compare the examples given in template)
When replace is true, the tag hello-world is no longer there, otherwise, it exists.
7.scope
(1) The default value is false. Indicates inheritance of the parent scope;
(2) True. Indicates inheriting the parent scope and creating your own scope (child scope);
(3) {}. Indicates creating a completely new isolation scope;
7.1 First, let’s understand the scope’s inheritance mechanism. Let's use the ng-controller command as an example.
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <div ng-controller='MainController'> Father:{{name}}<input ng-model="name" /> <div my-directive></div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('MainController', function ($scope) { $scope.name = 'Lin Bingwen'; }); app.directive('myDirective', function () { return { restrict: 'EA', scope:false, template: '<div>Son:{{ name }}<input ng-model="name"/></div>' }; }); </script> </html>Next, we use a simple and clear example to illustrate the differences in scope values:
scope:false
scope:true
scope:{}
When false, the son inherits the father's value and changes the father's value, and the son's value also changes, and vice versa. (Inheritance is not isolated)
When true, the son inherits the father's value and changes the father's value. The son's value changes accordingly, but when the son's value changes, the father's value remains unchanged. (Inheritance and isolation)
When {}, the father's value is not inherited, so the son's value is empty. Changing the value of either party cannot affect the value of the other party. (No inheritance and isolation)
tip: Isolating scope is a good choice when you want to create a reusable component. By isolating scopes we ensure that directives are 'independent' and can be easily inserted into any HTML app, and this approach prevents the parent scope from being contaminated;
7.2 Isolation scopes You can access the properties of the parent scope through binding policies.
Directive provides three ways to interact with places outside of isolation when using isolation scope. These three are
@ Bind a local scope attribute to the property value of the current dom node. The result is always a string, because the dom attribute is a string.
& Provides a way to execute an expression in the context of the parent scope. If the attr name is not specified, the attribute name is the same local name.
= Create a two-way binding between the local scope attribute and the parent scope attribute name through the value of the directive attr attribute.
@ local scope attribute
@ method local attributes are used to access string values defined by directive external environment, mainly binding external string values through the tag attribute where directive is located. This binding is one-way, that is, the binding changes of the parent scope. The properties of the scope in directive will change synchronously, while the binding changes in the scope are isolated, and the parent scope is not known.
The following example: directive declares that the scope type is not isolated, and uses the @ binding name attribute, and uses the name attribute to bind the attribute in the parent scope in directive. When changing the value of the attribute in the parent scope, directive will update the value synchronously. When changing the property value of the directive scope's scope's property value, parent scope cannot update the value synchronously.
js code:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <div ng-controller="myController"> <div> <div> Parent scope: <div>Say: {{name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="name"/></div> </div> <div>isolated scope: <div isolated-directive name="{{name}}"></div> </div> <div>isolated scope (not using parent scope {{name}}): <div isolated-directive name="name"></div> </div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller("myController", function ($scope) { $scope.name = "hello world"; }).directive("isolatedDirective", function () { return { scope: { name: "@" }, template: 'Say: {{name}} <br>Change the name of the isolated scope: <input type="buttom" value="" ng-model="name">' }; }); </script> </html>Results: The initial effect of the page
Animation effect:
You can see that the content on the parent scope has changed, and the child scope has changed at the same time. And the content on the subscope has changed. It does not affect the content on the parent scope!
= local scope attribute
= Create a two-way binding between the local scope attribute and the parent scope attribute name through the value of the directive attr attribute.
Meaning, when you want a two-way bound property, you can use = to introduce external properties. Whether changing the parent scope or isolating the properties in the scope, the parent scope and the isolation scope will update the property values at the same time because they are two-way bound relationships.
Sample code:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <div ng-controller="myController"> <div>Parent scope: <div>Say: {{user.name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="userBase.name"/></div> </div> <div>isolated scope: <div isolated-directive user="userBase"></div> </div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller("myController", function ($scope) { $scope.userBase = { name: 'hello', id: 1 }; }).directive("isolatedDirective", function () { return { scope: { user: "=" }, template: 'Say: {{user.name}} <br>Change the name of the isolated scope: <input type="buttom" value="" ng-model="user.name"/>' } }) </script> </html>Effect:
You can see that the content on the parent scope and the child scope is always the same!
& local scope attributes
The & method provides a way to directly execute an expression in the context of the parent scope. This expression can be a function.
For example, when you write a directive, when the user clicks a button, the directive wants to notify the controller, the controller cannot know what is happening in the directive. Maybe you can do it by using event broadcast in angular, but you must add an event listening method to the controller.
The best way is to enable directive to pass a function in a parent scope. When there is any action in directive that needs to be updated to the parent scope, a piece of code or a function can be executed in the parent scope context.
The following example executes the function of the parent scope in directive.
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <div ng-controller="myController"> <div>Parent scope: <div>Say: {{value}}</div> </div> <div>Isolated scope: <div isolated-directive action="click()"></div> </div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller("myController", function ($scope) { $scope.value = "hello world"; $scope.click = function () { $scope.value = Math.random(); }; }).directive("isolatedDirective", function () { return { scope: { action: "&" }, template: '<input type="button" value="Execute method of parent scope definition in directive" ng-click="action()"/>' } }) </script> </html>Effect:
There are many contents of instructions, let’s talk about transclude, compline, link, and controller.
8.transclude
If you do not want the content inside the directive to be replaced by the template, you can set this value to true. Generally, it needs to be used with the ngTransclude directive. For example: template: "<div>hello every <div ng-transclude></div></div>", at this time, the content inside the instruction will be embedded in the ng-transclude div. That is, it becomes <div>hello every <div>This is the content inside the command</div></div>. The default value is false; this configuration option allows us to extract the content contained in the directive element and then place it in a specific position in the directive template. When you enable transclude, you can use ng-transclude to indicate where to place translated content
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <div sidebox> <ul> <li>First link</li> <li>Second link</li> </ul> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('sidebox', function() { return { restrict: 'EA', scope: { title: '@' }, translate: true, template: '<div>/ <div>/ <h2>{{ title }}</h2>/ <span ng-transclude>/ </span>/ </div>/ </div>' }; }); </script> </html>result:
When transclude: false,
If the instruction uses the transclude parameter, the controller cannot monitor changes in the data model normally. It is recommended to use the $watch service in the link function.
9.controller
It can be a string or a function.
If it is a string, use the string as the name of the controller to find the constructor of the controller registered in the application.
angular.module('myApp', []) .directive('myDirective', function() { restrict: 'A', // Controller: 'SomeController' }) // Other places in the application can be the same file or another file contained in index.html angular.module('myApp') .controller('SomeController', function($scope, $element, $attrs, $transclude) { // The controller logic is placed here}); It can also be defined as anonymous functions directly inside the instruction, and we can inject any service here ($log, $timeout, etc.) [html] view plain copy View the code slice on CODE derived to my code slice angular.module('myApp',[]) .directive('myDirective', function() { restrict: 'A', controller: function($scope, $element, $attrs, $transclude) { // The controller logic is placed here} });There are also some special services (parameters) that can be injected
(1) $scope, scope associated with directive elements
(2) $element, the element corresponding to the current instruction
(3) $attrs, an object composed of attributes of the current element
(4) $transclude, embedded link function, actually executed functions used to clone elements and operate DOM
Note: Unless it is used to define some reusable behavior, it is generally not recommended here.
The controller and link functions of the instruction (to be discussed later) can be interchanged. The difference is that the controller is mainly used to provide behavior that can be reused between instructions, but the link link function can only define behavior in the current internal instructions and cannot be reused between instructions.
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <hello mycolor ="red">I am Lin Bingwen~~~</hello> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('hello', function() { return { restrict: 'EA', transclude: true, //Note that it must be set to true controller: function ($scope, $element,$attrs,$transclude,$log) { //Here you can inject the service you want to inject $transclude(function (clone) { var a = angular.element('<p>'); a.css('color', $attrs.mycolor); a.text(clone.text()); $element.append(a); }); $log.info("hello everyone"); } }; }); </script> </html>Output result:
And output hello everyone under the console
Let's look at $transclude(); here, it can take two parameters, the first is $scope, scope, and the second is a callback function with the parameter clone. And this clone is actually the embedded content (wrapped by jquery), and you can do a lot of DOM operations on it.
Its easiest way is
<script> angular.module('myApp',[]).directive('mySite', function () { return { restrict: 'EA', transclude: true, controller: function ($scope, $element,$attrs,$transclude,$log) { var a = $transclude(); //$transclude() is the embedded content $element.append(a); } }; }); </script>Note: Using $transclude will generate a new scope.
By default, if we simply and practically use $transclude(), then the default scope is the scope generated by $transclude
But if we use $transclude($scope,function(clone){}), then the scope is the scope of directive
Then the question comes again. What if we want to use the parent scope
$scope.$parent can be used
Similarly, if you want a new scope, you can also use $scope.$parent.new();
10.controllerAs
This option is used to set the alias of your controller
In the past, we often used this method to write code:
angular.module("app",[]) .controller("demoController",["$scope",function($scope){ $scope.title = "angualr"; }]) <div ng-app="app" ng-controller="demoController"> {{title}} </div>Later, angularjs1.2 brought us new syntax sugar, so we can write it like this
angular.module("app",[]) .controller("demoController",[function(){ this.title = "angualr"; }]) <div ng-app="app" ng-controller="demoController as demo"> {{demo.title}} </div>We can also write this in the command
<script> angular.module('myApp',[]).directive('mySite', function () { return { restrict: 'EA', transclude: true, controller:'someController', controllerAs:'mainController' //..Other configuration}; }); </script>11.require(string or array)
A string represents the name of another instruction, which will be used as the fourth parameter of the link function. We can give an example to illustrate the specific usage. Suppose we have to write two instructions now. There are many overlapping methods in the link link function (the link function will be discussed later). At this time, we can write these repeated methods in the controller of the third instruction (the controller is also mentioned above to provide the reuse behavior between instructions). Then in these two instructions, require the instruction with the controller field (the third instruction).
Finally, you can refer to these overlapping methods through the fourth parameter of the link link function.
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <outer-directive> <inner-directive></inner-directive> <inner-directive2></inner-directive2> </outer-directive> <script> var app = angular.module('myApp', []); app.directive('outerDirective', function() { return { scope: {}, restrict: 'AE', controller: function($scope) { this.say = function(someDirective) { console.log('Got:' + someDirective.message); }; } } }; }); app.directive('innerDirective', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,leifeng"; controllerInstance.say(scope); } }; }); app.directive('innerDirective2', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,shushu"; controllerInstance.say(scope); } }; }); </script> </body> </html>The instructions innerDirective and directive innerDirective2 in the above example reuse methods defined in the controller of the directive outerDirective.
It is further explained that the controller in the instruction is used to communicate between different instructions.
In addition, we can add a prefix to the parameter value of require, which will change the behavior of the search controller:
(1) Without a prefix, the instruction will be searched in the controller provided by itself. If no controller is found, an error will be thrown.
(2)? If the required controller is not found in the current instruction, null will be passed to the fourth parameter of the link connection function
(3)^If the required controller is not found in the current instruction, the controller of the parent element will be found
(4)?^ combination
12. Anguar's instruction compilation process
First load the angularjs library and find the ng-app directive to find the boundaries of the application.
Call $compile service for compilation according to the scope defined by ng-app. Angularjs will traverse the entire HTML document and process the instructions declared on the page according to the priority of the instructions according to the instructions. The DOM is converted according to the configuration parameters (template, place, transclude, etc.) in the instructions and then start executing the compile function of each instruction in order (if the compile function is defined on the instruction) to convert the template itself.
Note: The compile function here is configured in our directive, which is different from the $compile service mentioned above. After each compile function is executed, a link function will be returned, and all link functions will be combined into a large link function.
Then this large link function will be executed, mainly for data binding, dynamically modifying the data in the scope by registering a listener on the DOM, or using $watchs to listen for variables in the scope to modify the DOM, thereby establishing two-way binding, etc. If the compile function is not configured in our instruction, the link function we configured will run. What she does is roughly the same as the large link function synthesized by all the link functions after the compile returns above.
Therefore: in the directive, compile and link options are mutually exclusive. If these two options are set at the same time, the function returned by compile will be regarded as a link function, and the link option itself will be ignored.
13. Compile function
function compile(tElement, tAttrs, transclude) { ... }
Compilation functions are used to handle situations where the template DOM needs to be modified. Because most instructions do not require template modification, this function is not commonly used. Examples that need to be used include ngTrepeat, which requires the template to be modified, and ngView requires the content to be loaded asynchronously. The compiled function accepts the following parameters.
tElement - template element - The element in which the directive resides. It is safe to deform this element and its sub-elements.
tAttrs - template attributes - All attributes declared by the directive on this element are shared in the compiled function.
transclude - An embedded link function function(scope, cloneLinkingFn).
Note: Do not perform any operations other than DOM deformation in the compiled function. More importantly, the registration of DOM listening events should be done in the linked function, not in the compiled function.
A compiled function can return an object or function.
Return function - equivalent to a link function registered using the link attribute of the configuration object when the compiled function does not exist.
Return object - Returns an object that has registered a function through the pre or post attribute. Refer to the explanation of pre-linking and post-liking functions below.
14. Linking function
function link(scope, iElement, iAttrs, controller) { ... }
The link function is responsible for registering DOM events and updating the DOM. It is executed after the template is cloned, and it is also where most instruction logic code is written.
scope - The scope that directives need to listen.
iElement - instance element - The element where the directive resides. It is safe to operate on child elements of elements in the postLink function, because then they are all linked.
iAttrs - instance attributes - instance attributes, a standardized list of attributes declared on the current element, which are shared among all linked functions.
controller - controller instance, that is, controller inside direct2 requested by the current instruction. For example: controller:function(){this.addStrength = function(){}} in the direct2 directive, then, in the link function of the current directive, you can call it through controller.addStrength.
Pre-linking function executes before the child elements are linked. It cannot be used to deform DOM in case the link function cannot find the correct element to link.
Post-linking function All elements are executed after being linked.
illustrate:
The compile option itself is not used frequently, but the link function is used frequently. Essentially, when we set the link option, we actually create a postLink() link function so that the compile() function can define the link function. Generally, if the compile function is set, it means that we want to perform DOM operations before the instructions and real-time data are put into the DOM. It is safe to perform DOM operations such as adding and deleting nodes in this function. The compile and link options are mutually exclusive. If these two options are set at the same time, the function returned by compile will be regarded as a link function, and the link option itself will be ignored. The translation function is responsible for converting the template DOM. The link function is responsible for linking the scope and the DOM. The DOM can be manually operated before the scope is linked to the DOM. In practice, this kind of operation is very rare when writing custom instructions, but there are several built-in instructions that provide such functionality. The link function is optional. If a compiled function is defined, it returns the linked function, so when both functions are defined, the compiled function overloads the linked function. If our instructions are simple and do not require additional settings, we can return a function from the factory function (callback function) to replace the object. If this is done, this function is the link function.
This article is reproduced http://blog.csdn.net/evankaka
The above is the entire content of the usage of AngularJs:Directive instruction, I hope it will be helpful to everyone's learning.