AngularJS - 为什么 ng-click 处理程序没有被触发?
AngularJS - why is the ng-click handler not being fired?
这是HTML:
<tr data-ng-repeat="a in assignments" data-ng-click="vm.handleAssignmentClicked()">
...
</tr>
这是相关的指令和控制器:
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');
}
}
当我单击一个赋值(table 中的一行)时,handleAssignmentClicked()
函数没有被调用。我应该在哪里寻找问题?
Update:正如评论所指出的,父指令(我们假设正在使用)正在使用 controllerAs
语法,这在第二点[2]。我留下第一个供参考。
[1] 控制器中的 this
关键字与其 $scope
不同,除非您使用 contoller as controllerName
语法。
您可以在控制器中注入 $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()">
并且在您的控制器中,您将使用 this
使该功能可访问:
this.handleAssignmentClicked = function() { ... }
这是HTML:
<tr data-ng-repeat="a in assignments" data-ng-click="vm.handleAssignmentClicked()">
...
</tr>
这是相关的指令和控制器:
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');
}
}
当我单击一个赋值(table 中的一行)时,handleAssignmentClicked()
函数没有被调用。我应该在哪里寻找问题?
Update:正如评论所指出的,父指令(我们假设正在使用)正在使用 controllerAs
语法,这在第二点[2]。我留下第一个供参考。
[1] 控制器中的 this
关键字与其 $scope
不同,除非您使用 contoller as controllerName
语法。
您可以在控制器中注入 $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()">
并且在您的控制器中,您将使用 this
使该功能可访问:
this.handleAssignmentClicked = function() { ... }