彻底学会Angular.js中的transclusion

前言

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

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

一、什么是transclusion

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

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

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

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

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

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

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

第一种：

<handsome-me/> 

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

第二种：

<handsome-me></handsome-me> 

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

第三种：

<handsome-me>  //中间有好多代码</handsome-me> 

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

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