angularjs 自定义指令属性 :transclude priority terminal

原创
2017/09/04 17:05
阅读数 75

自定义指令的属性为transclude:true 时,是允许把html中新定义的指令中的template部分插入到另外的含有ng-transclude属性的自定义指令的template中,往往都是配合ng-transclude使用

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

<body>

<div ng-app="myApp">
  <div ng-controller="firstController">
     <custom-tags>原始数据</custom-tags>
     <div custom-tags2  custom-tags3>
      </div>
  </div>
</div>



</body>
var myApp=angular.module('myApp',[])
.directive('customTags',function(){
  return {
  restrict:'ECMA',
  template:'<div>新数据<span ng-transclude></span></div>',
  replace:true,
  transclude:true
 }

})
.directive('customTags2',function(){
  return {
   restrict:'ECMA',
   template:'<div>2</div>',
   replace:true,
   priority:-1 
   }

})
.directive('customTags3',function(){
 return {
 restrict:'ECAM',
 template:'<div>3</div>',
 priority:0,
 terminal:true

}

 }).
controller('firstController',['$scope',function($scope){

$scope.name="张三"


}])

最后输出结果是,priority小于0 的直接模板不显示

展开阅读全文
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部