Angular 封装 D3 指令
发布时间:2020-12-17 10:11:06 所属栏目:安全 来源:网络整理
导读:看到一个angular封装指令的栗子。 js代码: //sb变量建立在window对象上var sb = { name : "somebody",gender : "male",age : 28};angular.module("ezstuff",[]).directive("ezNamecard",function(){ return { restrict : "E",template : "div class='nameca
看到一个angular封装指令的栗子。 js代码: //sb变量建立在window对象上 var sb = { name : "somebody",gender : "male",age : 28 }; angular.module("ezstuff",[]) .directive("ezNamecard",function(){ return { restrict : "E",template : "<div class='namecard'>",replace : true,link : function(scope,element,attrs){ //读取data属性值,获得变量名,通过eval得到其值 var sb = eval(attrs.data); //填充DOM元素内容 element.append("<div>name : " + sb.name + "</div>") .append("<div>gender : " + sb.gender + "</div>") .append("<div>age : " + sb.age + "</div>") } }; }); css部分: .namecard{ border : 1px solid #000; border-radius : 10px; padding:10px; width:300px; background:#f0f0f0; } HTML部分: <html> <head> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> </head> <body ng-app="ezstuff"> <!--使用data属性向指令实现代码传递变量名--> <ez-namecard data="window.sb"></ez-namecard> </body> </html>
不过,请注意,前面定义的sb变量,默认是挂在window对象(命名空间)上的,即window.sb。 如果所有的数据都挂在window上,保不齐哪天就会出现变量的命名冲突。 AngularJS引入了一个自用的命名空间,也就是$rootScope对象,这样sb变量就可以 挂在$rootScope上了,即$rootScope.sb。 在HTML模板中,我们用了两个内置指令:
在指令的实现代码中,与之前使用eval函数进行表达式估值不同,我们直接使用scope的$eval方法获 得sb变量的值。 你可能注意到,这个scope是link函数传入的参数,它和我们说的$rootScope是一个东西吗? 加入了作用域的directive: angular.module("ezstuff",attrs){ var sb = scope.$eval(attrs.data); element.append("<div>name : " + sb.name + "</div>") .append("<div>gender : " + sb.gender + "</div>") .append("<div>age : " + sb.age + "</div>") } }; }); CSS代码 .namecard{ border : 1px solid #000; border-radius : 10px; padding:10px; width:300px; background:#f0f0f0; } HTML代码 <html> <head> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> </head> <!-- ng-app指令在body这个DOM对象上建立了$rootScope对象 --> <body ng-app="ezstuff" ng-init="sb = {name:'somebody',gender:'male',age:28}"> <!-- 注意我们传入的变量名没加命名空间--> <ez-namecard data="sb"></ez-namecard> </body> </html> 未完 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读