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:
属性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){ }]);执行结果:
相关文章推荐
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
- AngularJS自定义指令directive:scope属性
- angularjs的自定义指令的 @ 局部 scope 属性
- AngularJS自定义指令directive:scope属性
- AngularJS自定义指令directive:scope属性
- AngularJs自定义指令详解(8) - priority
- angularJs自定义指令用到的属性和方法
- AngularJs自定义指令详解(9) - terminal
- angularJs中自定义指令replace属性详解
- angularJS 自定义指令 方法属性:compile、link
- AngularJs中自定义指令directive的controller属性
- AngularJs自定义指令详解(8) - priority
- angularJs中自定义指令transclude与templateUrl详解
- AngularJs自定义指令详解(4) - transclude
- AngularJs自定义指令详解(9) - terminal
- AngularJS自定义指令directive:scope属性 (转载)
- angularJS自定义指令:scope属性
- AngularJs自定义指令详解(4) - transclude
- angularJS 自定义指令 方法属性:controller 和属性:controllerAs
- angularjs自定义directive指令的priority、terminal参数说明