您的位置:首页 > Web前端 > AngularJS

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

2016-10-21 15:23 417 查看
    自定义指令的属性 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){
}]);
执行结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: