angular指令中，require跟transclude同时设置为true时的作用

angular指令中，require和transclude同时设置为true时的作用

最近在学习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>

angular指令中，require跟transclude同时设置为true时的作用

相关推荐