The previous article introduced a lot of angular's own instructions, so let's look at how to use directive custom directives.
Let's look at an example:
<body> <div my-hello></div></body><script type= "Text/javascript" >var M1 = Angular.module (' myApp ', []); M1.directive (' MyHello ',function() { return { ' A ', true, ' <div>hello angular</div> ' };}); </script>1: We define a my-hello directive.
2: Use directive to refine this instruction and return an object. There are three values:
A): Restrict a total of four values: E: label directive, c:class instruction, M: note instruction, A: attribute directive
How do I use it?
b): Replace replaces (m note must be true to parse) look at the graph:
True
False
c): template content, in addition to Templateurl, specify an HTML template file.
Here's an example:
<div ng-controller="Aaa"> <div my-tab my-id="Div1"My-name="name"my-fn="Show (num)" class="J-tab"></div> <div My-tab my-id="Div2"My-name="name"my-fn="Show (num)" class="J-tab"></div></div><script type="Text/javascript">varM1 = Angular.module ('myApp', []); M1.controller ('Aaa',['$scope', Function ($scope) {$scope. Name='XIECG'; $scope. Age= -; $scope. Show=function (num) {console.log (num); };}]); M1.directive ('Mytab', function () {return{restrict:'ECMA', replace:true,//insert content in alternate way//Binding Policyscope: {myId:'@',//Parsing Ordinary stringsMyName:'=',//parsing DataMYFN:'&' //function}, CONTROLLER: ['$scope', Function ($scope) {//shared data is stored here$scope. Name ='This is a XIECG'; }], Template:'<div id= "{{myId}}" >\<input type="Button"Value="1" class="Active"ng-click="myfn ({num:456})"> <input type="Button"Value="2"> <input type="Button"Value="3"> <div style="Display:block;">{{myName}}</div> <div>2222</div> <div>3333</div> </div>' };});</script>
The 1:scope default is False, which indicates that the independent scope is true.
2:scope when an object is given, it means that the binding policy is executed and the data is raised on the template.
A): We my-id on the DOM element, we use the @ symbol to parse the ordinary string, which is what you write.
b): Use the = symbol to represent the parsing data.
c): Use the & symbol to indicate that this binds a function.
A 3:controller that represents the data used internally by the binding directives.
OK, let's continue to refine this tab switch example!
Full code:
<! DOCTYPE html> . J-tab. active{background-color: #03A9F4;} . J-tab Div{display:none;}</style><script type= "Text/javascript" src= "js/jquery-1.11.1.js" ></script><script type= "text /javascript "src=" js/angular.min.js "></script>varM1 = Angular.module (' myApp '), []); M1.controller (' Aaa ', [' $scope ',function($scope) {$scope. Sports=[{title:' Basketball ', Content: ' 111111111 '}, {title:' Football ', content: ' 222222222 '}, {title:' Volleyball ', Content: ' 333333333 '} ]; $scope. Time=[{title:' Morning ', Content: ' 444444444 '}, {title:' Noon ', Content: ' 555555555 '} ];}]); M1.directive (' Mytab ',function(){ return{restrict:E, replace:true, scope: {myId:‘@‘, MyData:=}, CONTROLLER: [' $scope ',function($scope) {$scope. Name= ' This is a XIECG '; }], Template:‘<div id= "{{myId}}" > <input ng-repeat= "Data in MyData" type= "button" ng-value= "Data.title" Ng-class= "{active: $first}" > <div ng-repeat= "Data in MyData" ng-style= "{display: $first? \ ' block\ ': \ ' None\ '} >{{data.content}}</div> </div>‘, Link:function(scope,element,attr) {Element.on (' Click ', ' Input ',function(){ varSelf = $ ( This), I =Self.index (); Self.addclass (' Active '). Siblings (' input '). Removeclass (' active '); Self.siblings (' div '). EQ (i). Show (). Siblings (' div '). Hide (); }); } };});</script></body>The Link property, which indicates that the method is executed when directive is compiled by angular. This method accepts three parameters,
A): scope represents the data below the controller.
b): element represents the current DOM element.
c): attr represents a custom attribute on this DOM element.
Add:
In the actual development process, we often need to nest various components and directives. The following is an introduction to transclude and require in directive.
<! DOCTYPE html>varM1 = Angular.module (' myApp '), []); M1.directive (' Hello ',function(){ return{restrict:E, replace:true, transclude:true,//allow nesting of custom directives, specifying nested scopes by Ng-transcludeController:function($scope) {$scope. Name= ' XIECG '; This. Name = ' XIECG ';//use this to share to other instructions}, Template:' <div>hello angular };}); M1.directive (' Hi ',function(){ return{restrict:E, replace:true, require:' ^hello ',//The Hello instruction property is the parent of the HI directive, which needs to be specified with the ^ symbol. If you cannot specify, use the error tolerant processing. Template: ' <span>hi angular {{name}}</span> ', Link:function(Scope,element,attr,recontroller) {console.log (Recontroller); //get the data that is shared in the parent Hello instruction } };});</script></body>
Learn notes, if there is insufficient, please correct me! Reproduced please keep the original link, thank you.
Finally, the micro-Bo powder, thank you.
Custom directives and instances of 11-angular
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
