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

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

js:

angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
    $scope.users=[
        {id:12,name:'张三'},{id:15,name:'李四'},{id:18,name:'王五'}
    ]
}])

<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',function($scope){
                $scope.users=[
                    {id:12,name:'王五'}
                ]
            }])

html:

<div ng-app="myApp" ng-controller="myCtrl">
    <user-list></user-list>
</div>

发现使用第二种方法完成这个需求，设置的返回对象的属性 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'，指示可以用元素的方式，类的方式，特性的方式来使用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!