本文实例讲述了angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考,具体如下:
一、html代码:
<!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>
二、tmp.html文件
<div quber-grid-attr> 我是测试的模板内容! </div>
三、js代码:
//初始化angular对象 var myng = angular.module('mainapp', []); myng.directive('qubergrid', function () { return { restrict: 'ea', replace: true,//移除<quber-grid>标签 templateurl: 'tmp.html', link: function (sco, ele, attr) { //通知下属dom,执行名为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') { //设置标签属性和值 attr.$set(key, val); } }); }); } }; }); myng.controller('maincontroller', function ($scope) { });
效果如下:
希望本文所述对大家angularjs程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论