最近在学习angularJS指令的时候,对指令对象中require属性和transclude属性同时设置为true比较疑惑,于是自己动手测试一下具体差异
index.html:
<simple>
<div>Inner content</div>
</simple>
自定义 simple指令
.directive("simple", function(){
return {
restrict: "E",
//transclude:true,
//replace:true,
scope:{
},
template:"<div>哈哈哈<div ng-transclude></div></div>"
}
1.transclude:true
<simple class="ng-isolate-scope">
<div class="ng-binding">
哈哈哈
<div ng-transclude="">
<div class="ng-scope">Inner content</div>
</div>
</div>
</simple>
2.replace:false
<simple class="ng-isolate-scope">
<div class="ng-binding">
哈哈哈
<div ng-transclude=""></div>
</div>
</simple>
3.replace:true
<div class="ng-binding ng-isolate-scope">
哈哈哈
<div ng-transclude=""></div>
</div>
4.replace:true
transclude:true
<div class="ng-binding ng-isolate-scope">
哈哈哈
<div ng-transclude="">
<div class="ng-scope">Inner content</div>
</div>
</div>