Angular custom directives, meaning we can define the instructions by angula ourselves, to achieve our special requirements, do whatever, a Pierce arrow, a mighty force to meet
How many years of the old ritual, first look at the code:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >6<meta name= "viewport" content= "Width=device-width, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no" >7<title>test</title>89<body ng-app= "MYAPP" >Ten<my-title></my-title>//Elemental My-title One<div my-title></div>//Properties My-title A<div class= "My-title" ></div>//class My-title -<!--directive:my-title-->//Note my-title (be sure to add Directive) -<script src= "Angular.min.js" ></script> the<script> - varApp = Angular.module ("myApp", []) - -App.directive ("MyTitle",function() {//mytitle corresponds to the my-title above + return { -Restrict: ' ECMA ',//instruction scope, E for elements, C for classes (class), m for annotations, and a for element properties + Template: ' replace:true//Replace the comment label with the template tag so that the comment content can be displayed in the Web page - } }) - -</script> -</body> inAs above, we can render the page through custom directives, of course, custom instructions can also be added to the controller, the controller scope as the parent scope, as follows:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >6<meta name= "viewport" content= "Width=device-width, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no" >7<title>test</title>89<body ng-app= "MYAPP" >Ten<my-title></my-title> One<div my-title></div> A<div class= "My-title" ></div> -<!--Directive:my-title-- -<div ng-controller= "Myctr" > the<input type= "text" ng-model= "MSG" > -<p My-title msg-data= "{{msg}}" >{{msg}}</p> - -</div> + -<script src= "Angular.min.js" ></script> +<script> A varApp = Angular.module ("myApp", []) at. Controller (' Myctr ',function($scope) { -$scope. msg = "Demacia"; - }) -. directive ("MyTitle",function(){ - return { -Restrict: ' A ', inControllerfunction($scope) { -$scope. msg = "Who else"?; to }, +Scopetrue//The default is False, which indicates that its scope and parent scope are the same, when True indicates that they have their own scopes that do not interfere with each other - } the }) * $</script>Panax Notoginseng</body> -Looking at the code above, it's easy to see that ANGULARJS supports concatenating, because angular's method returns an object that is the "app" above, so it can be like jquery concatenating
Scope can also be an object, such as:
1 Template: ' <em>{{msg}}</em> ',//The parent scope msg is italicized and loaded into a child scope as a template
2
3 Scope: {4 msg: ' @msgData ' //corresponds to the msg-data of the above code, its function is to point the sub-scope msg to the parent-scoped MSG, which facilitates the template loading operation in the previous step 5 }
As a result, the p tag of the child scope is also rendered as "Demacia"
From the above analysis, we find it possible to customize the method in custom directives. The answer is suspicious, that is the time when the link is shining, my broadsword has already been thirsty!!!
Code:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >6<meta name= "viewport" content= "Width=device-width, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no" >7<title>test</title>89<body ng-app= "MYAPP" >Ten<div repeat-num= "3" >I love the Chinese//custom directive, the div is rendered repeatedly 3 times One A</div> - -<script src= "Angular.min.js" ></script> the<script> - varApp = Angular.module ("myApp", []); - -App.directive ("Repeatnum",function(){ + return { -Restrict: ' A ', +Linkfunction(M,T,BC) {//These three parameters are through Console.log (this); Console.log (arguments); To view the A varnum =Bc.repeatnum; Get the value above Repeat-num atConsole.log ( This); - console.log (arguments); - for(vari = 0; i < num; i++{//for loop for multiple rendering - varCDom =T.clone (); Clone Div - T.after (CDom); Add the cloned div to the existing Div - } in } - to } + }) - the</script> *</body> $As shown in the link method, there are 5 parameters of which three are: M, T, Bc,m represents the scope, T represents the element that the custom instruction functions as DIV,BC represents its properties
Of course, we can also customize the operation of its child elements, that is, multiple rendering, and so on, the following code snippet:
1 <div repeat-num= "3" >2 3 </div>
function () { return { ' A ', function(M,T,BC) { var num = bc.repeatnum; var cDom = T.children (); //Find child nodes of the custom directive action element for (var i = 0; i < num; i++) { t.append (Cdom.clone ()); Clones its child elements and joins the parent element } }})
This is the use of custom instructions, welcome to the Summoner Canyon again.
Ladies and gentlemen, today is the history of today's we make, today are part of the history.
Angular custom Directives (directive)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
