angularJS 自定义指令 属性:transclude、priority、terminal

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中。

属性priority,设置该指令的优先级,优先级大的先执行,默认指令的优先级是0(但ng-repeat指令的优先级默认是1000)。 属性terminal:为true时,指示优先级小于当前指令的指令都不执行,仅执行到本指令。

示例:

html:

<div ng-app="myApp">

    <div ng-controller="firstController">

        <h3>custom-tags 指令:</h3>
        <div custom-tags>原始数据</div>

        <h3>一个div上同时使用 custom-tags2 指令 和 custom-tags3 指令:</h3>
        <div custom-tags2 custom-tags3></div>

    </div>

</div>
js:
angular.module('myApp',[])
    //定义第一个指令:customTags
    .directive('customTags',function(){
        return {
            restrict:'ECAM',
            template:'<div>Hello <span ng-transclude></span> world!</div>', //<span ng-transclude></span> 原来的dom
            transclude:true, //为true时,允许把节点内原来的dom放入template中
            replace:true     //为true时,设置的template或templateUrl都必须仅由一个最外层标签包裹
        }
    })
    //定义第二个指令:customTags2
    .directive('customTags2',function(){
        return {
            restrict:'ECAM',
            template:'<div>222</div>',
            replace:true,
            priority:-1  //指示指令的优先级,优先级大的先执行,默认指令们的优先级都是0,但ng-repeat指令的优先级是1000
        }
    })
    //定义第三个指令:customTags3
    .directive('customTags3',function(){
        return {
            restrict:'ECAM',
            template:'<div>333</div>',
            replace:true,
            priority:0,
            terminal:true  //为true时,指示优先级小于本指令的优先级的directive都不再执行
        }
    })
    .controller('firstController',['$scope',function($scope){
    }]);

执行结果:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值