我有像这样的分层数据：
[
{
"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",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",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>',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方法添加的集合中,父范围的深度会附加到newDepth.结果,级别3节点的深度具有值depth =“3 2 1”.
如何禁用继承深度？
我还注意到,当我在集合和成员指令中将replace更改为false时,深度按预期工作,但HTML无效.
解决方法
有时更简单的解决方案更好.最好在服务中压平树状结构,然后使用ng-repeat迭代新结构.
https://plnkr.co/edit/CiFGZYi6NdH8ZFDiAyPz?p=preview
更简单的代码.所有那些使其难以理解的指令都没有必要.此外,您不应该使用替换指令,因为它是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',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>',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;
});
}
};
});
