我在使用函数的返回值作为数组在自定义指令中以ng-repeat进行迭代时遇到了一些麻烦。
代码很简单:
.directive('treeRow', [function () {
return function createDirective() {
var treeController;
return {
restrict: 'E',
require: '^treeGrid',
scope: {
row: '='
},
templateUrl: 'components/treegrid/templates/row.html',
link: function (scope, element, attrs, gridController) {
treeController = gridController;
},
controller: function ($scope) {
$scope.getColumnDefinitions = function () {
return treeController.getColumnDefinitions();
};
}
};
}();
}]);
模板:
<tr>
<td ng-repeat="column in getColumnDefinitions()">{{row[column.key]}}</td>
</tr>
使用调试器,实际上从未在模板中调用getColumnDefinitions
函数。检查代码,虽然存在功能。
简单地在模板中回显它可以正常工作:
<tr>
<td>{{getColumnDefinitions()}}</td>
</tr>
使用ng-init将返回值分配给临时变量也不会调用该函数。
将数据直接添加到范围内也不起作用:
link: function (scope, element, attrs, gridController) {
treeController = gridController;
scope.columnDefinitions = gridController.getColumnDefinitions();
},
该指令是另一个ng-repeat的一部分,用作:
<tree-row ng-repeat="row in data" row="row"></tree-row>
更新
显然这是td
元素的问题。将其更改为div
元素可以正常工作:
<tr>
<div ng-repeat="column in getColumnDefinitions()">{{ row[column.key] }}</div>
</tr>
使用angular.js 1.3。*。
欢迎任何建议/提示, 谢谢:)