AngularJS：指令控制器中的$transclude local和链接函数中的tran

这是指令：

module.directive('myTransclude',function() {
  return {
    restrict: 'A',transclude: true,replace: true,scope: true,template: '<div style="border: 1px solid {{color}}"><div class="my-transclude-title"></div><div class="my-transclude-body"></div></div>',link: function(scope,element,attrs,controller,transclude) {
      // just to check transcluded scope
      scope.color = "red";
      transclude(scope,function(clone,scope) {
        Array.prototype.forEach.call(clone,function(node) {
          if (! node.tagName) {
            return;
          }
          // look for a placeholder node in the template that matches the tag in the multi-transcluded content
          var placeholder = element[0].querySelector('.' + node.tagName.toLowerCase());
          if (! placeholder) {
            return;
          }
          // insert the transcluded content
          placeholder.appendChild(node);
        });
      });
    }
  }
});

这是示例用法：

<div ng-controller="AppController">
    <div my-transclude>
        <my-transclude-title> <strong ng-bind="title"></strong>

        </my-transclude-title>
        <my-transclude-body>My name is {{name}} and I've been transcluded!</my-transclude-body>
    </div>
</div>

您可以在this fiddle中看到它的运行情况.

请注意以下几点：

>它通过元素类将片段与模板占位符匹配,而不是显式定义的子指令.有什么理由这样或那样做吗？
>与我见过的许多例子不同,它没有明确地在子片段上使用$compile服务.似乎Angular在翻译后编译片段,至少在这个简单的情况下.这总是正确的吗？
>它使用链接函数的(几乎没有记录的)transclude参数,而不是将$transclude local注入到controller指令中的其他(几乎没有文档记录)方法.在听到如此多的告诫不操纵控制器中的DOM之后,控制器方法看起来像是一个奇怪的构造,在链接函数中处理这种情况感觉更自然.但是,我尝试了这种方式,它似乎也一样.这两者有什么区别吗？

谢谢.

编辑：为了部分回答问题#2,我发现你确实需要显式编译未应用指令的模板克隆的被转换内容.请参阅此处的行为差异：http://jsfiddle.net/4tSqr/3/