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.因此depth,3级节点具有价值depth="3 2 1 ".

如何禁用继承depth？

我还注意到,当我更改replace为false in collection和memberdirectives时,深度按预期工作,但HTML无效.

Answer 1

看来，对子节点使用相同的范围会导致奇怪的串联。事实证明，解决这个问题非常简单 - 每个子级都需要新的子级作用域。链接函数将如下所示：

link: function (scope, element, attrs) {
    if (angular.isArray(scope.member.children) && scope.member.children.length > 0) {
        // Create isolated child scope, pass `scope` as parent
        var childScope = scope.$new(true, scope);
        childScope.depth = parseInt(scope.depth || 0) + 1;
        childScope.member = scope.member;

        var el = angular.element('<tr collection data="member.children" depth="{{depth}}" />');

        // use child scope
        $compile(el)(childScope);

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

普朗克： https: //plnkr.co/edit/xhJwfV?p =preview

我还在 SO 和 API 中发现了其他地方，它replace已被弃用，所以实际上不应该使用它。因此，如果不进行替换，它可能看起来像这样：

app.directive('tree', function () {
    return {
        restrict: 'E',
        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 row data="data"></tbody>' +
            '    </table>' +
            '</div>',
        link: function (scope, element, attrs) {
          scope.data = [
              { 
                name: 'Root',
                children: [
                  {
                    name: 'Level 1',
                    children: [
                      {
                        name: 'Level 2',
                        children: [
                          {name: "Level 3"},
                          {name: "Level 3 -1"}
                        ]
                      }
                    ]
                  },
                  {
                    "name": "Level 1-1"
                  }
                ]
              }
          ];
        }
    };
});

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

app.directive('cells', function($compile) {
    return {
        restrict: "A",
        scope: {
            data:  '=',
            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>' +
            '<td>{{depth}}</td>',
            //'</tr>',
        link: function (scope, element, attrs) {
            if (scope.member && angular.isArray(scope.member.children) && scope.member.children.length > 0) {
                var childScope = scope.$new(true);
                childScope.depth = parseInt(scope.depth || 0) + 1;
                childScope.data = scope.member.children;

                var el = angular.element('<tr cells ng-repeat="member in data" member="member" depth="{{depth}}" />');

                $compile(el)(childScope);

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

笨蛋： https: //plnkr.co/edit/j3YcuQ?p =preview