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

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

假如我们要展示一个用户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:'{{ user.id }} {{ user.name}}',
                     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模板，用于生成指令。

    而repalce属性，指示template设置的dom模板是否替换掉标签，如果为true，则标签不再生成；如果为false,则标签还生成，dom模板在内生成。

    除了这样使用指令              ----元素element的方式：E （推荐）
      还可以这样用：

   ----类class的方式：C （推荐）

      或者：

                               ----属性attribute的方式：A（推荐）

      以及：                         ----注释 mark 的方式：M

    那么设置这个指令可以使用哪些方式使用，就是 restrict 属性来设置，可以设为一种或多种，如上面的 'ECA'，指示可以用元素的方式，类的方式，特性的方式来使用。