This article describes the event bindings and instruction interaction usages used by directive directives in Angularjs. Share to everyone for your reference, specific as follows:
Use of templates in Angularjs, event bindings, and interaction between directives and directives
<! doctype html>
<html ng-app = "myapp">
<head>
<meta charset = "utf-8" />
</ head>
<body ng-controller = "ShieldController">
<div>
<who> </ who>
</ div>
<div>
<button you-btn> </ button>
</ div>
<theshield reigns> 343 </ theshield>
<theshield reigns> fdhg </ theshield>
<theshield rollins> hhh </ theshield>
<theshield ambros> kkk </ theshield>
</ body>
<script src = "./ js / angular.min.js"> </ script>
<script>
var app = angular.module ('myapp', []);
/ * ======================= 1. Use of the template ==================== ==== * /
app.directive ('who', function () {
return {
restrict: "E", // The meaning of element
link: function (scope, element, attrs) {
console.log (element);
element [0] .innerHTML = 'sdfhkj'; // This has the highest priority
},
//templateUrl:"param.html ", // this is not displayed, the lowest priority
template: "<h1> jkdhf </ h1>" // The priority of this display is next
};
});
/ * ======================= 2. Event binding =================== ===== * /
app.directive ('youBtn', function () {
return {
restrict: "A", // attribute attribute meaning
link: function (scope, element, attrs) {
console.log (element);
element [0] .innerHTML = 'my btn';
// Event binding
element.bind ('mouseenter', function () {
element [0] .innerHTML = 'your btn';
});
element.bind ('mouseleave', function () {
element [0] .innerHTML = 'her btn';
});
}
};
});
/ * ======================= 3. Interaction between element attribute controllers =============== ========= * /
app.controller ('ShieldController', function ($ scope) {
$ scope.shieldNames = [];
this.addReigns = function () {
$ scope.shieldNames.push ("reigns: jjj");
}
this.addRollins = function () {
$ scope.shieldNames.push ("Rollins: hhh");
}
this.addAmbros = function () {
$ scope.shieldNames.push ("Ambros: ggg");
}
})
.directive ('reigns', function () {
return {
require: "theshield",
link: function (scope, element, attrs, ShieldController) {
ShieldController.addReigns ();
}
};
})
.directive ('rollins', function () {
return {
require: "theshield",
link: function (scope, element, attrs, ShieldController) {
ShieldController.addRollins ();
}
};
})
.directive ('ambros', function () {
return {
require: "theshield",
link: function (scope, element, attrs, ShieldController) {
ShieldController.addAmbros ();
}
};
})
.directive ('theshield', function () {
return {
restrict: "E",
controller: "ShieldController", // Specify the controller
scope: {}, // Empty the $ scope value at this instruction
link: function (scope, element, attrs) {
element.bind ('mouseenter', function () {// For the element corresponding to the instruction, bind the corresponding event
console.log (scope.shieldNames);
});
}
};
});
</ script>
</ html>
I hope this article will help you with ANGULARJS programming.
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
