温故知新:Angular下的 directive
Angularjsdirective
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对应的变量上。
相关推荐
youyouzouzou 2014-05-30
zbwroom 2014-05-30
zhenghao 2014-05-30
lizean 2014-05-30
夏小球 2017-09-20
Inuyasha 2017-05-27
xingdongfang 2019-11-10
zhenghao 2014-05-30
老卫的技术站 2018-10-09
Oranq 2017-03-22
LDN0 2014-07-02
CrazyDogWang 2017-09-10
zbwroom 2017-09-10
lujingjing 2019-06-28
CrazyDogWang 2016-06-07
lizean 2016-05-20
zhenghao 2016-05-17
youyouzouzou 2016-05-11