javascript - Angular - ControllerAs 中的函数无法执行

Question

我是 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 )。然而，我认为这不是问题所在。

我不知道我哪里出错了。任何帮助和指导将不胜感激。

Answer 1

您似乎将当前 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'
})