Angularjs directive
Angularjs 提供的directive指令可以用来写自己的命令甚至标签。
用例子来说事吧:自定义指令example
directive.html
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title>TestDirective</title>
<link href='css/bootstrap.css' rel='stylesheet' type='text/css' />
<script lang='javascript' src='lib/js/angular/angular.min.js'></script>
<script src='js/TestDirectiveController.js' type='text/javascript'></script>
</head>
<body>
<div example></div>
</body>
</html>
TestDirective.js
angular.module('myApp',[])
.controller('TestDirectiveController',function($scope){
$scope.content = {'name':'LiMing','age':'12'};
})
.directive('example',function(){
return {
restrict:'A'
template:'Name:{{content.name}},Age:{{content.age}}';
}
});
在这里面定义了名为example的directive,它是一个function,返回值是一个对象:
restrict属性表明example要匹配的的是一个标签('E')还是标签中的一个属性('A'),如这里的html中将example用在了div中,因此example便成了div的一个属性,因此restrict返回的是A;
template属性表明要填充到div中的内容。
打开网页运行后便在此div处显示出Name:LiMing,Age:12.
在强大一点,可以用angular的directive功能实现重复模板的复用。例子如下:
directive.html
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title>TestDirective</title>
<link href='css/bootstrap.css' rel='stylesheet' type='text/css' />
<script lang='javascript' src='lib/js/angular/angular.min.js'></script>
<script src='js/TestDirectiveController.js' type='text/javascript'></script>
</head>
<body>
<div example info='LiMing'></div>
<div example info='WangYu'></div>
</body>
</html>
info.html(要复用的模板)
<div>
Hello{{peopelInfo.name}},你已经{{peopleInfo.age}}岁了。
</div>
TestDirectiveController.js
angular.module('myApp',[])
.controller('TestDirectiveController',function($scope){
$scope.LiMing = {'name':'LiMing','age':'12'};
$scope.WangYu = {'name':'WangYu','age':'14'};
})
.directive('example',function(){
return {
restrict:'A',
scope:{
peopleInfo:'=info'
},
templateUrl:'info.html';
}
});
这里scope中的内容表明了模板中的poepleInfo变量要被谁替代,在这里是被info取代,info在directive.html中可以看到分别代表着'LiMing'和'WangYu',这样替代后便绑定到了TestDirectiveController下的$scope对应的变量上。
分享到:
相关推荐
数学:吃透课本温故知新.docx
机械军工行业:“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间.pdf
通信行业:温故知新,从4G看5G-1202-中信建投-12页.pdf
固定收益专题报告:温故知新,国债期货1903合约回顾与总结_国信证券-13页.pdf
农林牧渔行业专题研究:温故知新,复盘上两轮生猪疫情影响-0213-广发证券-17页.pdf
类固收系列报告之四:温故知新,新股首日涨幅预测模型及卖出策略-0511-光大证券-23页.pdf
20210202-银河证券-“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间.pdf
温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)
纺织服装行业“温故知新”系列之百丽复盘:渠道为王铸就龙头,改革初见成效-0717-华泰证券-26页.pdf
SpringSpringSpring温故知新六AOP向切面程Spring温故知新六AOP向切面程
机械军工行业:“温故知新”系列之工业机器人行业复盘-从日德韩发展历程看中国工业机器人的未来.pdf
5G行业发展报告,证券研究报告
计算机小数表示.温故知新.pdf
初中语文文学讨论现当代文学温故知新
“温故知新”系列之工业机器人行业复盘(三):从零部件国产化看产业链协同发展(附报告).pdf
“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间
中信建设温故知新,从 4G 看 5G.rar
中信建设温故知新,从 4G 看 5G.pdf
“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间-20210202-银河.pdf