从模板移动子指令到编译fn会中断范围连接

Question

我有嵌套指令，都创建了新的范围。为了保留原始内容，我决定将child指令移动到父指令的编译功能。这一举动打破了范围之间的联系，有人可以解释我为什么吗？感谢

jsfiddle :(从父指令中删除模板以查看问题） http://jsfiddle.net/luckylooke/uDkd3/9/

var myApp = angular.module('myApp', [])
.directive('parent', function directive() {
return {
    compile: function(elm){
        elm.append("</br> Appended <div child></div>");
    },
    template:"</br>From template <div child></div>",
    scope: {},
    controller: function ($scope) {
        $scope.who = "parent";
        $scope.message = "Text message";
        //console.log($scope);
    }
};
}).directive('child', function directive() {
return {
    replace: true,
    scope: {},
    template: '<div class="child">child with {{$parent.message || "NO message!"}}</div>',
    controller: function ($scope) {
        $scope.who = "child";
        //console.log($scope);
    }
};
});

Answer 1

问题

根据this answer中的Angularjs isolated scope for directives without own template：

  

[...]只会绑定指令模板中的元素   该指令创建的隔离范围。如果你不使用   template - 声明指令的元素的内容，   将绑定，就像隔离范围不存在一样。

以下是使用模板的范围层次结构：

......这就是没有一个人的样子：

解决方案

使用transclusion将视图中的元素注入parent而不使用compile：

.directive('parent', function directive() {
  return {
      transclude: true,
      template:"</br><div ng-transclude></div>From template <div child></div>",
      scope: {},
      controller: function ($scope) {
          $scope.who = "parent";
          $scope.message = "Text message";
      }
  };
})

Demo

此处child指令又是parent指令的实际子指令。另请注意，被抄送的内容出现在另一个范围内，该范围是parent的隔离范围的兄弟：