The example in this article describes the method by which Angularjs uses directive custom directives to implement attribute inheritance. Share to everyone for your reference, specific as follows:
One, HTML code:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../Content/Plugins/Angular/angular.min.js"></script> </head> <body ng-app="mainApp" ng-controller="mainController"> <quber-grid style="border: 1px solid #f00;" title="qubernet"></quber-grid> </body> </html>
Second, tmp.html documents
<div quber-grid-attr> I was testing the template content! </div>
Third, JS code:
Initializes the angular object
var myng = angular.module (' Mainapp ', []);
Myng.directive (' Qubergrid ', function () {return
{
restrict: ' EA ',
replace:true,//removal <quber-grid> Tags
templateurl: ' tmp.html ',
link:function (SCO, Ele, attr) {
//notify subordinate DOM, execute event called Sendchildgridattr
SCO . $broadcast (' sendchildgridattr ', attr);
}
}; Myng.directive (' qubergridattr ', function () {return
{
restrict: ' A ',
link:function (SCO, Ele, attr) { C17/>sco. $on (' sendchildgridattr ', function (event, data) {
Angular.foreach (data, function (Val, key, obj) {
if (Key!= ' $attr ' && key!= ' $ $element ') {
//Set Tag property and value
attr. $set (Key, Val);
}
}
);
}
};
});
Myng.controller (' Maincontroller ', function ($scope) {});
The effect is as follows:
I hope this article will help you to Angularjs program design.
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
