AngularJS:ng repeat未在作用域指令内执行

Question

遇到一个问题，ng repeat似乎没有在自定义指令中执行。我认为这个问题与transclusion/scope有关，但我真的不确定。

指令：

.directive('node', ['$compile', function($compile) {
    return {
        restrict: 'E',
        scope: {
            obj: '=obj',
        },
        transclude: true,
        link: function(scope, element, attrs, ctrl, transclude) {
            transclude(scope, function(clone, scope) {
                console.log(clone);
                var tmp = angular.element('<div></div>'), template;
                tmp.append(clone);
                if(scope.obj.hasSub) {
                    template =
                        '<div>' +
                          '<span>{{obj.name}}</span>' +
                          '<ul>' +
                              '<li ng-repeat="child in obj.children">' +
                                '<node data-obj="child" >' + tmp.html() + '</browser-node>' +
                              '</li>' +
                          '</ul>' +
                        '</div>';
                } else {
                  template = 
                    '<div>' +
                      tmp.html() +
                    '</div>'
                }
                element.html('').append($compile(template)(scope));
            });
        }
    };
}]);

控制器：

.controller('Main', ['$scope', function($scope) {
  $scope.items = [
    {'name': 'one', hasSub: true, children: [
      { 'name': 'one-one', items: { foo: 3, bar: 2 } } 
    ] },
    {'name': 'two', hasSub: true, children: [
      { 'name': 'two-one', items: { foo: 6, bar: 5 } } 
    ] }
  ];
}]);

html:

   <ul>
  <li ng-repeat="item in items">
    <node obj="item">
      {{obj.name}}
      <ul>
        <li ng-repeat="(k,v) in obj.items">{{k}}: {{v}}</li>
      </ul>
    </node>
</ul>

项节点的名称显示良好，{{obj.items}}将输出正确的内容，但ng repeat似乎没有任何作用。

Plunker

Answer 1

在第一级数据中没有属性items。如果您在模板中嵌套items的中继器并更改为child.items，则工作正常

template =
    '<div>' +
      '<span>{{obj.name}}</span>' +
      '<ul>' +
          '<li ng-repeat="child in obj.children">' +
            '<node data-obj="child" >' + tmp.html() + '</node>' +
            '<ul>'+
            '<li ng-repeat="(k,v) in child.items">{{k}}: {{v}}</li>'+
          '</ul>'+
          '</li>' +
      '</ul>' +
    '</div>';

DEMO