angularjs 自定义指令属性 :transclude priority terminal
angularjs 自定义指令属性 :transclude priority terminal
安吉拉 发表于3个月前
angularjs 自定义指令属性 :transclude priority terminal
  • 发表于 3个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

自定义指令的属性为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 的直接模板不显示

共有 人打赏支持
粉丝 2
博文 30
码字总数 7446
评论 (0)
×
安吉拉
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: