Home > Developer > JavaScript
AngularJS command interaction details and instance code, angularjs instance
Background
This is an example in the video. There is a dynamic Superman with three capabilities: strength, speed, and light.
These three capabilities act as three attributes, and define dynamic Superman as a tag. You only need to add the corresponding attributes to have this capability.
To facilitate the display of results, adding a mouse RESPONSE event to the tag triggers a method when the mouse moves to the corresponding tag to print out the capabilities.
Program Analysis
The html code 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>
Next let's take a look at how to implement it. The first step is to create a module:
Var myAppModule = angular. module ("myApp", []);
Create a tag superman based on this module, which is similar to the previous one.
myAppModule.directive("superman",function(){ return{ scope:{}, restrict:'AE', transclude: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 opened to the outside of the command, the method declared in it, it can be used externally as a public method, and other commands can be used through dependencies.
Next, create the commands corresponding to the three 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 code for the three commands is similar, and require specifies the dependent commands.
The link contains a parameter supermanCtrl, which is assumed to be the controller in superman. Therefore, the name is named by superman + Ctrl.
[Because I don't understand the internal principle, I only want to guess here, but the experiment proves that if I change the name of this parameter, an error will be reported .]
Once these three commands are declared, these three commands can be used as super attributes. When this attribute is specified, internal methods in the link will be triggered, call the methods exposed in superman.
To sum up, the interaction process of commands:
1. First, create a basic command and add an external public method after the controller attribute.
2. Create other interactive commands. Add the corresponding command dependency after the require attribute. Call the public method in the link.
All program code:
<!doctype html>
Running result:
The above are the materials for AngularJS instruction interaction, and relevant information will be added later. Thank you for your support for this site!
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
