我是 Angular 新手,想使用 ui-bootstrap
来使用模态(弹出表单)来自 Angular 。我正在学习Angular bootstrap site 。可以看出,它利用了ControllerAs
控制弹出窗口。
我面临的问题是ctrl中的函数无法在ng-click
中执行事件,即使我已经输入了正确的值 ng-click='ctrl.open()'
为了更清楚地说明,我将在下面提供我的代码。
Controller.js
'use strict';
function funcListEmployeeCtrl($scope) {
var ctrl = this;
ctrl.items = ['item1', 'item2', 'item3'];
ctrl.animationsEnabled = false;
console.log(ctrl);
ctrl.open = function (size, parentSelector) {
console.log('selected'); //this is not fired
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.change-password-modal-container ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: 'ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return ctrl.items;
}
}
});
}
angular.module('listEmployee')
.controller('listEmployeeCtrl', ['$scope', funcListEmployeeCtrl])
.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var ctrl = this;
ctrl.items = items;
ctrl.selected = {
item: $ctrl.items[0]
};
ctrl.ok = function () {
$uibModalInstance.close($ctrl.selected.item);
};
ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
请注意,即使是 console.log('selected');
没有被解雇。因此,可以断定ng-click
无法访问该函数。 .
View.html
...
<tbody>
<tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort|filter:{ Name: search_value }">
<td>{{emp.SalesmanId}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Address}}</td>
<td>{{emp.Phone}}</td>
<td>{{emp.Email}}</td>
<td ng-click='ctrl.open()'>{{emp.Username}}</td>
<td>{{emp.Role}}</td>
</tr>
</tbody>
...
我想做的是每当用户单击用户名单元格时打开一个模式。 HTML 工作正常,因为我尝试更改 ng-click
到 $scope
中的函数它正在发挥作用。另外,console.log(ctrl);
显示内容,所以我确定 ctrl 对象已设置。下面我提供日志的截图。
请注意,我收到了来自 Chrome 的 DevTools 警告,我不知道如何摆脱它(我使用 .min.js
而不是 .map
)。然而,我认为这不是问题所在。
我不知道我哪里出错了。任何帮助和指导将不胜感激。
最佳答案
您似乎将当前 Controller 与 modalController 混淆了。您为模态声明 controllerAs: 'ctrl'
,但这并不意味着您可以在当前 Controller 中使用 ctrl
。
您有两个 Controller :listEmployeeCtrl
和ModalInstanceCtrl
。只有第二个 Controller (ModalInstanceCtrl
) 可以在其模板中使用 ctrl
。
如果您还想对 listEmployeeCtrl
使用 ctrl
,则需要将 ng-controller
指令添加到 view.html .
使用您的示例代码:
<div ng-controller="listEmployeeCtrl as ctrl">
...
<tbody>
<tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort|filter:{ Name: search_value }">
<td>{{emp.SalesmanId}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Address}}</td>
<td>{{emp.Phone}}</td>
<td>{{emp.Email}}</td>
<td ng-click='ctrl.open()'>{{emp.Username}}</td>
<td>{{emp.Role}}</td>
</tr>
</tbody>
...
</div>
或
在您描述路线的地方,您可能有类似的内容
.when('...', {
controller: 'listEmployeeCtrl',
templateUrl: '.../view.html'
})
您可以在其中添加controllerAs语法:
.when('...', {
controller: 'listEmployeeCtrl',
controllerAs: 'ctrl',
templateUrl: '.../view.html'
})
关于javascript - Angular - ControllerAs 中的函数无法执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43651255/