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');
            }
        }
    };
});

为清楚起见： actions是格式的对象：

   {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);
    }
}

将绑定变量传递给ng-click以获取动态单击处理程序

1 个答案: