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:'王五'}
    ]
}])
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',指示可以用元素的方式,类的方式,特性的方式来使用。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值