Background information
This example is a video example, there is a dynamic Superman, there are three kinds of ability, power strength, speed speed, luminous light.
These three abilities, as three attributes, define motion Superman as a label that can have the ability to add a corresponding attribute.
To facilitate the presentation of the results, add a mouse response event to the tag, and when the mouse is moved to the corresponding label, a method is triggered to print out the ability.
Program Analysis
The code for the HTML section 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 look at how to do this, and still create a module first:
var myappmodule = angular.module ("myApp", []);
On the basis of the module, create a label Superman, similar to the previous.
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 within the method, which is not a Ng-controller controller, but an interface to the open door, the method declared inside can be used externally as a public method, and other instructions can be used by relying on the method.
Next, create three instructions for the ability.
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 three instructions is similar, where require specifies the dependent instruction.
Link in a more than a parameter Supermanctrl, this parameter conjecture is Superman in the controller, so name the way to use Superman+ctrl.
"Because I don't know the internal principle, this is just conjecture, but the experiment proves that if you change the name of this parameter, you will get an error." 】
By declaring these three instructions, you can use these three instructions as super properties, and when annotated with this attribute, the internal link method is triggered and the method exposed in the Superman is invoked.
To sum up, the interactive process of an instruction:
1 first create a basic instruction, after the controller attribute, add the method of exposing to the outside world.
2 Create other interactive instructions, add the corresponding instruction dependencies after the Require property, and invoke the exposed method in link
All program code:
<!doctype html>
Run Result:
The above is the ANGULARJS instruction of the interactive data collation, follow-up continue to supplement the relevant information, thank you for your support of 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
