Home > Developer > Web Develop
Before practicing how to customize instructions, here's a practice of how instructions are reused in different controllers.
--from " mu lesson network Directive 3"
First look at a small example of a custom command that captures a mouse event and triggers a method in the controller.
Label directives for a single controllerStill create a module first
var myappmodule = Angular.module ("myApp", []);On the basis of the module, create the controller and instructions
Myappmodule.controller ("Myappctrl", ["$scope",function($scope) {$scope. Count= 0; $scope. LoadData=function() {$scope. Count= $scope. count+1; Console.log ("Myappctrl load data!" +$scope. Count); } }]); Myappmodule.directive ("Loader",function(){ return{restrict:"AE", transclude:true, Template:"<div><div ng-transclude></div></div>", Link:function(scope,element,attr) {Element.bind ("MouseEnter",function(){ //Scope.loaddata (); scope. $apply ("LoadData ()"); }); } } });
First look at the created controller, where a LoadData method is created to trigger the event, and a counter is added to facilitate the observation of the result.
The following directives take the use of attributes and tag elements: "AE", in order to get the effect, create an inline template (to avoid the lack of content, not to click).
And within the method of the Link property, add the corresponding event, there are three parameters in the method:
1 scope, scope, method to invoke the corresponding scope.
2 element, which refers to the created label
3 attr, for extending properties, showing how to use them later
With the above preparatory work, you can use the tag in the body:
<div ng-controller= "Myappctrl" > <loader howtoload= "LoadData ()" > First loader!</loader> </div>
How to reuse instructions
The above is only a single controller instruction to use, an instruction in a page can be used multiple times, it means that there will be more than one controller to use the directive.
So how does the instruction know the method that invokes the controller? This uses the Attr property.
When you create a directive, call attr to get the value of the property
Myappmodule.directive ("loader",function(){ return{restrict:"AE", transclude:true, Template:"<div><div ng-transclude></div></div>", Link:function(scope,element,attr) {Element.bind ("MouseEnter",function(){ //Scope.loaddata (); //scope. $apply ("LoadData ()");scope. $apply (attr.howtoload); }); } } });
It can be used in the body as follows:
<div ng-controller= "Myappctrl" > <loader howtoload= "LoadData ()" > First loader!</loader> </div> <div ng-controller= "MyAppCtrl2" > <loader howtoload= "LoadData2 ()" > Second loader!< /loader> </div>
It is important to note that:
1 The attributes in the tag are named using the Hump method and are converted to all lowercase in the instruction.
Only the name of the property is called in the 2 instruction, there is no method bracket.
3 when applied, the value of the property is the execution method declared within the controller.
Here's a look at the sample code:
<!doctype html>varMyappmodule = Angular.module ("myApp",[]); Myappmodule.controller ("Myappctrl", ["$scope",function($scope) {$scope. Count= 0; $scope. LoadData=function() {$scope. Count= $scope. count+1; Console.log ("Myappctrl load data!" +$scope. Count); } }]); Myappmodule.controller ("MyAppCtrl2", ["$scope",function($scope) {$scope. Count= 0; $scope. LoadData2=function() {$scope. Count= $scope. count+1; Console.log ("MyAppCtrl2 load data!" +$scope. Count); } }]); Myappmodule.directive ("Loader",function(){ return{restrict:"AE", transclude:true, Template:"<div><div ng-transclude></div></div>", Link:function(scope,element,attr) {Element.bind ("MouseEnter",function(){ //Scope.loaddata (); //scope. $apply ("LoadData ()");scope. $apply (attr.howtoload); }); } } }); </script> </body>The result of the implementation:
"AngularJS"--10 instruction is reused
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
