最近在学习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>
复制代码
posted on 2015-11-05 15:59  杨杨0708  阅读(173)  评论(0编辑  收藏  举报