Question

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

这是小提琴：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]返回一个字符串，而不是对函数本身的引用。你应该直接调用这个函数，比如：

.then(function(str) {
  return new MyFacade(str);
})

并在指令中包含类似的内容：

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

Answer 2

检查演示：JSFiddle。

首先，链接函数声明不正确：

link: ['$scope', function($scope) {
    $scope.updateCategory = function() {
        console.log("WOW");
    };
}]

这是controller函数的格式。将其更改为：

link: function($scope) { ... }

Angular将为您进行注射。

其次，在范围上指定调度程序功能。在调度程序内部，确定要调用的函数：

$scope.dispatcher = function (column) {
    var fn = column.function;
    fn && angular.isFunction($scope[fn]) && $scope[fn]();
};

并在HTML中指定ng-click="dispatcher(column)"。

Answer 3

请看这个小提琴，因为它可能适合您的需要。

http://jsfiddle.net/tep78g6w/45/

link:function(scope, element, attrs) {
    scope.updateCategory = function() {
        console.log("WOW");
    };

    scope.doSomething = function(func) {
        var test = scope.$eval(func);
            if(test)
                 test();
            }
     }
}

此外，链接功能具有发送给它的参数，这不是使用DI的地方。请在小提琴中看到正确的方法。至于动态调用函数，我采用了不同的方法，它的工作原理。你采用的方法不会起作用，因为你需要一种方法让字符串成为一个函数，它需要有一个函数的引用。

动态ng-click不调用函数

3 个答案: