ng-repeat使用范围函数返回值而不是调用函数

时间:2014-07-27 20:57:27

标签: javascript angularjs angularjs-directive angularjs-ng-repeat

我在使用函数的返回值作为数组在自定义指令中以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。*。

欢迎任何建议/提示, 谢谢:)

0 个答案:

没有答案