Javascript 将绑定变量传递给动态单击处理程序的ng click

我有下面的dom

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

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

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

而

列字段

将是

某些列

，

某些其他列

，等等，这取决于特定的迭代

这将很好地绑定，并将clickable类添加到元素中，其中ng click为非空

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

活动[col.field]（在本例中）的字符串表示形式是：

fetch（'activity'，$parent.$index）

控制器当然在范围内，因为它是通过父指令上的

controller:

键定义的（不确定是否相关）隔离范围

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

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

---

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

我认为您需要将

操作[col.field]

更改为

操作（col.field）

。这是我对您的指令的测试代码：

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

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

应用程序指令（'gridItem'，函数（$compile）{
返回{
限制：“A”，
模板：“废话”，
链接：函数postLink（范围、元素、属性）{
if（范围$eval（element.attr（'ng-click'））{
元素addClass（'clickable'）；
}
}
};
});
函数MainCtrl（$scope）{
$scope.columnDefs=['a'，'b'，'c']；
$scope.actions=函数（字段）{
控制台日志（字段）；
}
}

我认为您需要将

操作[col.field]

更改为

操作（col.field）

。这是我对您的指令的测试代码：

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

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

应用程序指令（'gridItem'，函数（$compile）{
返回{
限制：“A”，
模板：“废话”，
链接：函数postLink（范围、元素、属性）{
if（范围$eval（element.attr（'ng-click'））{
元素addClass（'clickable'）；
}
}
};
});
函数MainCtrl（$scope）{
$scope.columnDefs=['a'，'b'，'c']；
$scope.actions=函数（字段）{
控制台日志（字段）；
}
}

很抱歉，我说得不清楚。动作是散列。我编辑了我的问题以反映这一点。很抱歉，我没有说得更清楚。动作是散列。我编辑了我的问题以反映这一点。