我想在 angularJS 中创建一个树形网格。我正在创建一个指令来实现这一点。每一行都包含一个元素和层次结构。到目前为止，我创建了一个带有树视图的表。但是子元素没有获得相对范围。
当我创建一个新行时，我正在调用 _newRow(item, level)。我在哪里创建行并返回 . 现在对于这个特定的行，“项目”应该是范围。
完整代码可在http://jsfiddle.net/sravanrekandar/Kzw6q/2/获得
(function(){
'use strict';
angular.module('$srv.directives').directive('bsTree', [
'$parse',
'$compile',
'$timeout',
function ($parse, $compile, $timeout) {
var buildTemplate = function (items, ul) {
var table = [
'<table class="table table-bordered">',
'<thead><tr><th>Item</th><th>Href</th><th>Level</th></t></thead>',
'</table>'
],
level = 1,
tbody = angular.element('<tbody></tbody'),
rows;
table = angular.element(table.join(''));
rows = _prepareRows(items, level);
tbody.append(rows)
table.append(tbody);
function _newRow(item, level) {
var tr = [
'<tr>',
'<td>',
'<span ng-click="toggleCollapse(item)" ng-class="{\'icon-plus-sign\': !item.isCollapsed}" class="tree-level-' + level + '">',
'</span>',
item.text,
'</td>',
'<td>' + item.href + '</td>',
'<td>' + level + '</td>',
'</tr>'
].join('');
tr = angular.element(tr);
//$compile(tr)(item); // [[Error: TypeError: Object #<Object> has no method '$watch']]
return tr;
}
function _prepareRows(items, level) {
var rows = [],
i;
angular.forEach(items, function (item, index) {
if(!item.isCollapsed) {
item.isCollapsed = true;
}
var row = _newRow(item, level);
rows.push(row);
if(item.items && item.items.length) {
row = _prepareRows(item.items, level+1);
if (angular.isArray(row)) {
for(i = 0; i < row.length; i++) {
rows.push(row[i]);
}
}
}
});
return rows;
}
return table;
};
return {
restrict: 'EA',
scope: true,
link: function postLink(scope, iElement, iAttrs) {
var getter = $parse(iAttrs.bsTree), items = getter(scope);
$timeout(function () {
if (!angular.isArray(items)) {
}
var table = buildTemplate(items);
table.insertAfter(iElement);
$compile(iElement.next('table.table'))(scope);
});
}
};
}
]);
})();