angularJS 自定义指令 属性：restrict、template、replace

原地址：http://blog.csdn.net/xuanwuziyou/article/details/52881068

假如我们要展示一个用户list，使用angularJS，可以这样做：先在控制器中定义用户列表的数组，再在html中写上相应的dom元素，如下：

js:

[javascript]  view plain  copy

1. angular.module('myApp',[])  
2. .controller('myCtrl',['$scope',function($scope){  
3.     $scope.users=[  
4.         {id:12,name:'张三'},  
5.         {id:15,name:'李四'},  
6.         {id:18,name:'王五'}  
7.     ]  
8. }])  

html：

[html]  view plain  copy

1. <div ng-app="myApp" ng-controller="myCtrl">  
2.     <ul>  
3.         <li ng-repeat="user in users">{{ user.id }} {{ user.name }}</li>  
4.     </ul>  
5. </div>  

结果：

    然而，假如这个用户list有多个页面要用到，或者说我们不想直接把它写在html里，这时就可以使用angularJS的“自定义指令”了，先来看自定义指令实现上面需求的例子：

js:

[javascript]  view plain  copy

1. angular.module('myApp',[])  
2.             //自定义指令的方法directive  
3.             //第一个参数是指令名称  
4.             //第二个参数是个function，返回设置指令属性的对象  
5.             .directive('userList',function(){  
6.                 return {  
7.                     restrict:'ECA',  
8.                     template:'<ul><li ng-repeat="user in users">{{ user.id }} {{ user.name}}</li></ul>',  
9.                     replace:true  
10.                 }  
11.             })  
12.             .controller('myCtrl',['$scope',function($scope){  
13.                 $scope.users=[  
14.                     {id:12,name:'张三'},  
15.                     {id:15,name:'李四'},  
16.                     {id:18,name:'王五'}  
17.                 ]  
18.             }])  

html:

[html]  view plain  copy

1. <div ng-app="myApp" ng-controller="myCtrl">  
2.     <user-list></user-list>  
3. </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'，指示可以用元素的方式，类的方式，特性的方式来使用。