今天我们来研究一下如何使用ng-transclude指令,以及指令的transclude选项；首先要说明我们使用的Angular的版本是1.5.0，因为不同版本的表现结果不是那么相同。

首先我们应该了解到，在angular指令的选项中，有一项是transclude，这个选项有三种值：false，true，object；那这三种值分别表示什么，该如何选择？下面我们来详细的说明一下。

transclude字面意思就是嵌入，也就是说你需不需要将你的指令内部的元素（注意不是指令的模板）嵌入到你的模板中去，默认是false。如果你需要这种功能的话，那么就需要将transclude设置为true或者{...}。如果将这个值设置为true或者{...}的话，那么就要配合angular的ng-transclude指令来进行使用，好，废话不多说了，看代码是最好的学习方法，我们下面就来根据代码来了解掌握这些东西。

代码的结果可以在这里看到，完整的代码会在后面贴出来，现在我们来看第一个指令部分

• 在页面中使用的形式

  PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="

  $AAAAAA $我是指令[one-transclude]元素内部的内容

  " tITle="" data-original-title="复制">

  <!--  指令one-transclude 内部含有元素-->
  <one-transclude class="one-transclude-self">
      <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
  </one-transclude>

  我们定义了一个名字叫做one-transclude的指令，也就是说这个指令的模板中只有一个嵌入点的，指令内部是有一些元素的我给内部的元素的内容做了一些标记，方便我们后面观察。

• JavaScript代码部分

  angular.module('app', [])
      .directive('oneTransclude', oneTransclude);
  
  function oneTransclude() {
      return {
          restrict: 'AE',
          transclude: true,
          templateUrl: 'one-transclude.htML'
      };
  }

  我们在JavaScript中定义oneTransclude，注意我们这里transclude=true，表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置。

• 指令的模板部分

  <div class="one-transclude">
      <div class="one-transclude__title">
          $BBBBBB$ 我是指令[one-transclude]模板的内容
      </div>
      <hr>
      <ng-transclude>
          $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
       </ng-transclude>
  </div>

  上面书写了我们的指令模板，可以看到我们的模板由两部分组成，一部分是含有ng-transclude指令的，一部分是不含有这个指令的。当然我也把这些里面的内容作了一些标记，方便后面我们观察。因为这里的ng-transclude后面不带有参数，所以指令里面的元素就是那些以$AAAAAA$开头的整块元素都会嵌入到指令模板中含有ng-transclude指令的内部，还要注意，如果指令模板中含有ng-transclude指令的元素内部也有元素的话，那么这些元素会被替代。还有一种情况，那就是如果指令里面不含有元素，那么指令模板里面的含有ng-transclude指令的元素的内部元素会显示出来

• 我们可以看下图更直观的了解一下。
  

  

多个嵌入点的情况，这时候指令内部的ng-transclude的值是一个对象，一种映射关系；具体的可以看下面的代码：

• 指令在页面中使用的代码：

  <!-- 指令mutil-transclude -->
  <multi-transclude>
      <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
      <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
      <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
  </multi-transclude>

  我们在页面中使用了multi-transclude这个指令，在指令的内部还有三个指令，这内部的三个指令要以E的形式应用，不然会出现问题，看到这里不明白的没关系，继续往下看。

• JavaScript代码中的指令：

  angular.module('app', [])
      .directive('multiTransclude', multiTransclude);
      
  function multiTransclude() {
      return {
          restrict: 'AE',
          transclude: {
              'title': 'multiTranscludeTitle',
              'body': 'multiTranscludeBody',
              'footer': '?multiTranscludeFooter'
          },
          templateUrl: 'multi-transclude.html'
      };
  }

  我们的transclude对象定义了如何将多个嵌入点与指令内部的指令嵌入点一一对应，拿'footer': '?multiTranscludeFooter'来解释一下，footer对应指令模板中的一个嵌入点，multiTranscludeFooter对应指令元素内部的哪个multi-transclude-footer指令，前面的?表示这个嵌入点不一定有对应的指令存在。当然multiTranscludeFooter是我们自己定义的，可以随意定义，但是尽量做到让大家一看就知道是对应哪个嵌入点就行。

• 指令对应的模板

  360@

  忽略我,我就是证明我是在模板中的2
  " title="" data-original-title="复制">