javascript - 动态 ng-click 不调用函数

Question

我想在 AngularJS 中创建一个动态表，但问题是 ng-click 没有调用该函数。

• 这是 fiddle :fiddle

• 代码如下:

通用模板:

<div class="box">
    <dynamic-table></dynamic-table>
</div>

指令模板:

<table class="table table-striped">
<thead>
<tr>
    <th ng-repeat="column in columns" ng-bind="column.label"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in data">
    <td ng-repeat="column in columns">
        <!-- Problem is here (column[function] displays 'displayCategory') -->
        <a href ng-click="column[function]()">{{ content[column.field] }}</a>
    </td>
</tr>
</tbody>
</table>

指令代码:

app.directive('dynamicTable', function () {
    return {
        restrict: 'E',
        templateUrl:'/template/Directive/dynamic-table.html',
        scope: true,
        link: ['$scope', function($scope) {
            $scope.updateCategory = function() {
                console.log("WOW");
            };
        }]
    };
});

当我显示:column[function] 时，它显示 updateCategory。不明白为什么点进去功能没有启动...

你有想法吗？

Answer 1

那是因为 column[function] 返回一个字符串，而不是对函数本身的引用。您应该直接调用该函数，例如:

<td ng-repeat="column in columns">
    <!-- Problem is here (column[function] displays 'displayCategory') -->
    <a href ng-click="updateCategory (column)">{{ column.field }}</a>
</td>

在指令中有类似的东西:

 controller: ['$scope', function($scope) {
        $scope.updateCategory = function(columnData) {
            console.log(columnData.field);
        };
    }]