前言

AngularJS中指令的重要性是不言而喻的，指令让我们可以创建自己的HTML标记，它将自定义元素变成了一个一个的模块，极大的体现了前端开发中的模块化模式，并提高了代码的易读性和重用性。AngularJS中的指令也是学习AngularJS中的一个难点所在，其中的许多属性，需要反复学习，认真体会，方能领悟其中的精妙之处。

今天我们要讲的就是其中一个重点和难点 – transclusion。关于这个话题我之前也写过很多文章来讲述，但是当时都是照搬博文中的例子，自己也没有比较深刻的体会，因此一直不得要领。今天我们的目标就是“彻底弄懂transclusion”。

一、什么是transclusion

好吧，我知道你肯定会去查词典，但是你会发现，词典上没有transclusion这个词的准确释义！！！纳尼！！！这不坑爹的吗！！！！

还好，维基百科上有一个注释，翻译过来意思大概是这样的：

transclusion在计算机科学中指的是讲一个文档或者一个文档的某部分在另一个文档中引用。 我去，这不坑爹的吗！！！什么意思！！！！

确实，你猜对了，这个解释对我们一点帮助都没有！！！！！！

还好，我们终于在某道词典找到了一个解释:“嵌入”，这里指的是transclusion这个词，而在后面我们即将看到的transclude这个词压根在词典上就找不到。算了，淡定一点，继续往下看。其实这里翻译为“嵌入”，如果从实际运用中来看，还是比较贴切的。如果你不太理解什么是transclusion，我们下面用一个例子来说明一下。

ok，现在我们要创建一个指令了，我们把这个指令叫做 。在此先略过这个指令的创建过程，如果你还不知道怎样创建一个指令，请前参看前面几篇文章。

好了，无论怎么说，这个指令已经创建好了，于是我们可以有以下几种用法：

第一种：

就像是input一样对吧，很简单，我们叫它“自开自闭”（要是你在别的书上没看过这个名称，那就是我发明的，反正就这么叫）标签。

第二种：

就像是div一样对吧，更简单，我们叫它“自开别人闭”（同上同上）标签。

第三种：

这个和第二种很像吧，但是又有点区别，我们叫它“自开别人闭，中间加一坨”（总是感觉好粗俗。。。never mind。。。）标签。

我们来对比以下三种标签，它们有什么区别。当然区别很多。但是具体到我们今天的话题，与之相关的最大的区别就是前两种中间没有加一坨，第三种中间加了一坨。OK，因此我们现在来总结什么叫做transclusion：

如果你在定义指令的时候，想要它在具体使用时中间加一坨，那么你就要用transclusion。

这个定义实在是太经典了，完全比什么官方文档要清楚有没有，完爆各种老外唧唧歪歪说半天还是不明白有没有，完全符合中国国情有没有！！！

好了，知道了定义以后，我们要开始来看看具体怎么使用transclusion了。如果你了解AngularJS指令的编写，你一定知道return的那个对象的tranclude指令默认是false，因此如果你想要开启使用transclusion的话，就要将这个transclude属性赋上一个别的值，当然，这个值不能乱赋，它只有两种选择：

第一种选择：

第二种选择：

我去，这个又是毛线啊！两者之间有毛的区别啊！！文档完全是看不懂的嘛！！！

淡定一点，现在我们来说区别。最常用的呢，是第一种，也就是赋值为true。还记得transclusion的中文意思吗，“嵌入”对吧！因此我们现在就不说“一坨”，而把中间的这一坨叫做“嵌入部分”。ok，回到正题，当transclude是true的时候，嵌入部分就是嵌入部分，比如说：

在transclude:true的时候，它的嵌入部分是什么啊？对了，就是{{name}} 。再来一发：

在transclude:true的时候，它的嵌入部分是什么啊？对了，是