AngularJS - 为什么 ng-click 处理程序没有被触发？

Question

这是 HTML:

    <tr data-ng-repeat="a in assignments" data-ng-click="vm.handleAssignmentClicked()">
        ...
    </tr>

以下是关联的指令和 Controller :

angular
    .module('app.assignments')
    .directive('stfrAssignments', assignmentsDirective)
    .controller('AssignmentsController', AssignmentsController);

function assignmentsDirective() {
    var directive = {
        restrict: 'E',
        templateUrl: 'components/assignments/assignments.html',
        scope: {
            assignments: '='
        },
        controller: 'AssignmentsController',
        controllerAs: 'vm'
    };
    return directive;
}

function AssignmentsController() {
    var vm = this;

    function handleAssignmentClicked() {
        console.log('handleAssignmentClicked');
    }
}

当我单击某个分配(表中的一行)时，handleAssignmentClicked() 函数不会被调用。我应该在哪里寻找问题？

Answer 1

更新:正如评论所指出的，父指令(我们假设正在使用)正在使用 controllerAs 语法，这在第二点中得到解决[2]。我留下第一个以供引用。

[1] Controller 中的 this 关键字与其 $scope 不同，除非您使用 contoller as controllerName 语法.

您可以在 Controller 中注入(inject)$scope:

function AssignmentsController($scope) {
  $scope.handleAssignmentClicked() {
    console.log('handleAssignmentClicked');
  }
}

[2] 或者，您的情况是:

<div ng-controller="AssignmentsController as assignCtrl">
...
  <tr data-ng-repeat="a in assignCtrl.assignments" data-ng-click="assignCtrl.handleAssignmentClicked()">

在您的 Controller 中，您将使用 this 来使该函数可访问:

this.handleAssignmentClicked = function() { ... }