将绑定变量传递给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等视在特定的迭代上

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

但是，控制器上的方法永远不会被调用。为什么是这样？我怎样才能动态绑定到基于字符串表示的函数？

活动[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); 
    } 
}