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

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

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

js:

[javascript] view
plain copy

angular.module('myApp',[])  

.controller('myCtrl',['$scope',function($scope){  

    $scope.users=[  

        {id:12,name:'张三'},  

        {id:15,name:'李四'},  

        {id:18,name:'王五'}  

    ]  

}])  

html：

[html] view
plain copy

<div ng-app="myApp" ng-controller
11bd3
="myCtrl">  

    <ul>  

        <li ng-repeat="user in users">{{ user.id }} {{ user.name }}</li>  

    </ul>  

</div>  

结果：



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

js:

[javascript] view
plain copy

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:

[html] view
plain copy

<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'，指示可以用元素的方式，类的方式，特性的方式来使用。