Background introduction
This example is an example in the video, there is a dynamic superman, with three abilities, strength strength, speed speed, glow light.
These three abilities are used as three attributes, and define Dynamic Superman as a tag. You can have this ability by adding the corresponding attributes.
To facilitate the display of results, add a mouse response event to the tag. When the mouse moves to the corresponding tag, a method will be triggered to print out the capabilities it has.
Program Analysis
The code for the html part is as follows:
<div> <superman>nothing!</superman> <superman strength >strength!</superman> <superman strength speed >strength speed!</superman> <superman strength speed light >strength speed light!</superman> </div>
Let’s see how to implement it. The first thing is to create a module:
var myAppModule = angular.module("myApp",[]);
On the basis of this module, create the tag superman, similar to the previous one.
myAppModule.directive("superman",function(){ return{ scope:{}, restrict:'AE', translate:true, template:"<div><div ng-transclude></div></div>", controller:function($scope){ $scope.abilities = []; this.addStrength = function(){ $scope.abilities.push("strength"); }; this.addSpeed = function(){ $scope.abilities.push("speed"); }; this.addLight = function(){ $scope.abilities.push("light"); }; }, link:function(scope,element,attr){ element.bind("mouseenter",function(){ console.log(scope.abilities); }); } } });The difference here is that there is a controller attribute inside the method. This is not a controller like ng-controller, but an interface for instructions to be open to the outside. The methods declared in it can be used externally as public methods, and other instructions can use these methods through dependencies.
Next, create three commands corresponding to the capabilities
myAppModule.directive("strength",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addStrength(); } } }); myAppModule.directive("speed",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addSpeed(); } } }); myAppModule.directive("light",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addLight(); } } });The codes of the three instructions are almost the same, where require specifies the dependent instructions.
There is an additional parameter supermanCtrl in the link. This parameter is guessed to be the controller in superman, so the naming method is superman+Ctrl.
[Because I don’t understand the internal principles, this is just a guess, but experiments have proved that if the name of this parameter is changed, an error will be reported. 】
After declaring these three instructions, you can use these three instructions as super attributes. When this attribute is indicated, the internal method within the link will be triggered and the methods disclosed in superman will be called.
To sum up, the interactive process of instructions:
1 First create a basic directive, and after the controller attribute, add the method disclosed to the public.
2 Create other interactive instructions, add the corresponding instruction dependency after the require attribute; call the exposed method in the link
All program codes:
<!doctype html><html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <div> <superman>nothing!</superman> <superman strength >strength!</superman> <superman strength >strength speed!</superman> <superman strength speed >strength speed!</superman> <superman strength speed light >strength speed light!</superman> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule.directive("superman",function(){ return{ scope:{}, restrict:'AE', translate:true, template:"<div><div ng-transclude></div></div>", controller:function($scope){ $scope.abilities = []; this.addStrength = function(){ $scope.abilities.push("strength"); }; this.addSpeed = function(){ $scope.abilities.push("speed"); }; this.addLight = function(){ $scope.abilities.push("light"); }; }, link:function(scope,element,attr){ element.bind("mouseenter",function(){ console.log(scope.abilities); }); } } }); myAppModule.directive("strength",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addStrength(); } } }); myAppModule.directive("speed",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addSpeed(); } } }); myAppModule.directive("light",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addLight(); } } }); </script> </body></html>Running results:
The above is the information on the interaction of AngularJS instructions. We will continue to add relevant information in the future. Thank you for your support for this site!