transclude

 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>保留了原来的的内部元素，让其自动插入到模板内部