javascript - Angular 追加父属性值

Question

我有这样的分层数据:

[  
    {  
        "children":[  
            {  
                "children":[...],
                [...]
            },
            {  
                "children":[...],
                [...]
            },
        ],
        [...]
    }
]

我想通过展平数据来构建树状网格。我正在使用以下指令:

app.directive('tree', function (hierarchyService, logger, $timeout) {
    return {
        scope: {
            data: '='
        },
        restrict: 'E',
        replace: true,
        template: '<div>' +
            '<table class="table table-striped table-hover">' +
            '    <thead>' +
            '        <tr>' +
            '            <th class="col-md-6">Account name</th>' +
            '        </tr>' +
            '        </thead>' +
            '        <tbody><tr collection data="data" /></tbody>' +
            '    </table>' +
            '</div>'
    };
});

app.directive('collection', function() {
    return {
        restrict: "A",
        replace: true,
        scope: {
            data: '=',
            depth: '@'
        },
        template: '<member ng-repeat="member in data" member="member" depth="{{depth}}" />',
        link: function (scope, element, attrs) {
            scope.depth = parseInt(scope.depth || 0);
        }
    }
});

app.directive('member', function($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            depth: '@',
            member: '='
        },
        template: '<tr ng-class="{selected: member.selected}">' +
            '<td>' +
            '   <span ng-show="depth > 0" style="width: {{depth * 16}}px; display: inline-block;"></span> {{member.name}}' +
            '</td>' +
            '</tr>',
        link: function (scope, element, attrs) {
            scope.depth = parseInt(scope.depth || 0);

            if (angular.isArray(scope.member.children) && scope.member.children.length > 0) {
                var el = angular.element('<tr collection data="member.children" depth="{{newDepth}}" />');
                scope.depth = parseInt(scope.depth || 0);
                scope.newDepth = scope.depth + 1;
                $compile(el)(scope);

                // Flatten hierarchy, by appending el to parent
                element.parent().append(el);
            }
        }
    }
});

问题是，在通过 link 方法添加的集合中，父范围的 depth 附加到 newDepth。因此，第 3 级节点的 depth 的值为 depth="3 2 1 "。

如何禁止继承depth？

我还注意到，当我在 collection 和 member 指令中将 replace 更改为 false 时，深度按预期工作，但 HTML无效。

Answer 1

有时更简单的解决方案更好。最好将服务中的树状结构展平，然后使用 ng-repeat 迭代新结构。 https://plnkr.co/edit/CiFGZYi6NdH8ZFDiAyPz?p=preview

更简单的代码。不需要所有那些难以理解的指令。此外，您不应该使用 replace with 指令，因为它是 deprecated .

动态设置样式你应该使用ng-style指令。

var app = angular.module('app', []);

app.factory('treeFlatting', function () {
  function flattenTree(tree, depth) {
    depth = depth || 0;

    return tree.reduce(function (rows, node) {
      var row = {
        name: node.name,
        depth: depth,
      };
      var childrenRows = angular.isArray(node.children) ? 
        flattenTree(node.children, depth + 1) : [];

      return rows.concat(row, childrenRows);
    }, []);
  }

  return flattenTree;
});

app.directive('tree', function (treeFlatting) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>' +
            '<table class="table table-striped table-hover">' +
            '    <thead>' +
            '        <tr>' +
            '            <th class="col-md-6">Account name</th>' +
            '            <th class="col-md-1">Depth</th>' +
            '        </tr>' +
            '        </thead>' +
            '        <tbody>'+
            '          <tr ng-repeat="row in rows">'+
            '             <td ng-style="{\'padding-left\': (16 * row.depth) + \'px\'}">{{row.name}}</td>'+
            '             <td>{{row.depth}}</td>'+
            '          </tr>'+
            '        </tbody>' +
            '    </table>' +
            '</div>',
        link: function (scope, element, attrs) {
          scope.data = [
              { 
                name: 'Root',
                children: [
                  {
                    name: 'Level 1',
                    children: [
                      {
                        name: 'Level 2'
                      }
                    ]
                  }
                ]
              }
          ];

          scope.rows = treeFlatting(scope.data).filter(function (row) {
            return row.depth > 0;
          });
        }
    };
});