假如我们要展示一个用户list,使用angularJS,可以这样做:先在控制器中定义用户列表的数组,再在html中写上相应的dom元素,如下:
js:
angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
$scope.users=[
{id:12,name:'张三'},
{id:15,name:'李四'},
{id:18,name:'王五'}
]
}])
html:<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="user in users">{{ user.id }} {{ user.name }}</li>
</ul>
</div>
结果:
然而,假如这个用户list有多个页面要用到,或者说我们不想直接把它写在html里,这时就可以使用angularJS的“自定义指令”了,先来看自定义指令实现上面需求的例子:
js:
angular.module('myApp',[])
//自定义指令的方法directive
//第一个参数是指令名称
//第二个参数是个function,返回设置指令属性的对象
.directive('userList',function(){
return {
restrict:'ECA',
template:'<ul><li ng-repeat="user in users">{{ user.id }} {{ user.name}}</li></ul>',
replace:true
}
})
.controller('myCtrl',['$scope',function($scope){
$scope.users=[
{id:12,name:'张三'},
{id:15,name:'李四'},
{id:18,name:'王五'}
]
}])
html:
<div ng-app="myApp" ng-controller="myCtrl">
<user-list></user-list>
</div>
结果:实例中,我们定义了一个指令‘userList’,由于L是大写,依据angularJS约定,在html中使用这个指令时,必须写作:‘user-list’,即大写字母转成小写并在该字母前面加上 '-' 。
发现使用第二种方法完成这个需求,设置的返回对象的属性 template和第一种方法中的html中所写的dom相同,template属性就是这个作用,设置dom模板,用于生成指令<user-list></user-list>。
而repalce属性,指示template设置的dom模板是否替换掉<user-list></user-list>标签,如果为true,则<user-list></user-list>标签不再生成;如果为false,则<user-list></user-list>标签还生成,dom模板在<user-list>内生成。
除了<user-list></user-list>这样使用指令 ----元素element的方式:E (推荐)
还可以这样用: <div class="user-list"></div> ----类class的方式:C (推荐)
或者:<div user-list></div> ----属性attribute的方式:A(推荐)
以及:<!-- directive:user-list --> ----注释 mark 的方式:M
那么设置这个指令可以使用哪些方式使用,就是 restrict 属性来设置,可以设为一种或多种,如上面的 'ECA',指示可以用元素的方式,类的方式,特性的方式来使用。