AngularJS自定义控件实例详解(4)

注意 <mytransclude> 元素内的 HTML。这部分 HTML 代码包含了内插指令 {{firstName}}。我们希望 AngularJS 来为我们处理这部分 HTML，让内插指令执行。为了实现这个目的，我在指令定义对象中把 transclude 设置为 true。我还在 HTML 模板中用到了 ng-transclude 属性。这个属性告诉 AngularJS 什么元素需要插入到 transcluded HTML。

1: 说实话，我没看懂那个定义，说的太TM难懂了，而且我好不爽写代码没输出的教程。只好自己动手做做例子。我觉得其实应该是这样的，把目标元素内容作为一个整体，拿到 HTML 模板中来，添加到 ng-transclude 指定的标签下。这个处理，我觉得应该就是叫做 transcluded。比如说刚才的例子(有些 bug，自己修正一下)，因为 directive.transclude = true; ，所以原来 <mytransclude> 元素内的 HTML:

<!-- lang: js --> This is a transcluded directive {{firstName}}

在激活指令 'mytransclude' 的时候，会被拿到 'mytransclude' 指令的模板中来，放到被 ng-transclude 指定的

<!-- lang: js --> "<div ng-transclude></div>"

中。于是最终输出的结果应该是:

<!-- lang: js --> <mytransclude> <div ng-transclude> <span>This is a transcluded directive Jakob</span> </div> </mytransclude>