This article describes the method of Angularjs using directive custom directives to implement attribute inheritance. Share it for your reference, as follows:
1. 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;"></quber-grid></body></html>
2. tmp.html file
<div quber-grid-attr> I'm the template content for the test! </div>
3. Js code:
//Initialize the Angular object var myNg = angular.module('mainApp', []);myNg.directive('quberGrid', function () { return { restrict: 'EA', replace: true,//Remove the <quber-grid> tag templateUrl: 'tmp.html', link: function (sco, ele, attr) { //Notify the subordinate DOM and execute the event named sendChildGridAttr sco.$broadcast('sendChildGridAttr', attr); } };});myNg.directive('quberGridAttr', function () { return { restrict: 'A', link: function (sco, ele, attr) { sco.$on('sendChildGridAttr', function (event, data) { angular.forEach(data, function (val, key, obj) { if (key != '$attr' && key != '$$element') { //Set the tag attributes and values attr.$set(key, val); } }); }); } }); } }; } }; }); myNg.controller('mainController', function ($scope) { });The effects are as follows:
I hope this article will be helpful to everyone's AngularJS programming.