将绑定变量传递给ng-click以实现动态点击处理程序

Question

我有以下dom。

   <td grid-item ng-repeat='col in columnDefs' ng-click="actions[col.field]"></td>

这包装在指令中：

angular.module('myApp').
directive('gridItem', function () {
    return {
        restrict: 'A',
        templateUrl: 'views/grid_item.html',
        link: function postLink(scope, element, attrs) {
            if (scope.$eval(element.attr('ng-click'))) {
                element.addClass('clickable');
            }
        }
    };
});

为了清楚起见：操作是以下格式的对象：

   {some_column: '', some_other_column: 'myFunction(arguments)', some_third_column: 'myOtherFunction(arguments)'}

和col.field将是some_column ， some_other_column等，具体取决于特定的迭代

这样可以很好地绑定，并将clickable类添加到ng-click非空白的元素中。

但是，永远不会调用控制器上的方法。 为什么是这样？ 以及如何基于字符串表示形式动态绑定到函数？

activity [col.field]的字符串表示形式（在这种情况下）是： fetch('activity', $parent.$index) 。

控制器肯定是在范围内，因为它是通过controller:在带有（不确定是否相关）隔离范围的父指令上定义的。

注意：我已经找到一种破解它的方法，

      element.on('click', function(){
        scope.$eval(scope.$eval(attrs.ngClick));
      });

显然，这不是一个理想的解决方案...

Answer 1

我认为您需要将actions[col.field]更改为actions(col.field) 。 这是我对您的指令的测试代码：

<div lang="en" ng-app="App" ng-controller="MainCtrl">
    <table>
        <td grid-item ng-repeat='col in columnDefs' ng-click="actions(col.field)"></td>
    </table>
</div>

app.directive('gridItem', function ($compile) {
    return {
        restrict: 'A',
        template: '<div>blah</div>',
        link: function postLink(scope, element, attrs) {
            if (scope.$eval(element.attr('ng-click'))) {
                element.addClass('clickable');
            }
        }
    };
});

function MainCtrl($scope) {
    $scope.columnDefs = ['a', 'b', 'c'];

    $scope.actions = function (field) {
        console.log(field);
    }
}