javascript - AngularJS : ng-repeat not executing inside scoped directive

Question

遇到 ng-repeat 似乎没有在自定义指令内执行的问题。我认为问题与嵌入/范围有关，但我不太确定。

指令:

.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 :

.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>

item节点的名称显示正常，{{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