Angular custom Directives (directive)

Source: Internet
Author: User

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> in

As 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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.