將綁定變量傳遞給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); 
    } 
}