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('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

AngularJS：ng-repeat不在stroped指令内执行

1 个答案: