1

我有以下 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 非空白的元素。

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

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

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

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

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

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

4

1 回答 1

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);
    }
}
于 2013-07-17T00:25:04.277 回答