1 <body class="container"> 2 <dialog> 3 <div>这是我内部的内容</div> 4 </dialog> 5 </body> 6 <script src="../lib/angular/angular.js"></script> 7 <script> 8 angular.module('zfpxMod',[]); 9 angular.module('zfpxMod').directive('dialog',function(){ 10 return { 11 transclude:true,//保留原来指令的内部元素,并且自动插入到转换后的模板内部 具有ng-transclude指令的元素内部 12 // A Attribute 属性 E element 元素 M Commnent注释 C class 类名 13 restrict:'AEMC',//限定指令出现的位置AEMC 14 replace:true,// 会把指令本身替换掉 15 template:'<div class="panel panel-default"> <div class="panel-heading">头部</div><div class="panel-body" ng-transclude></div></div>' 16 } 17 }); 18 </script>
显示结果：
<div class="panel panel-default"> <div class="panel-heading">头部</div><div class="panel-body" ng-transclude="">
<div class="ng-scope">这是我内部的内容</div>
</div></div>保留了原来的的内部元素，让其自动插入到模板内部