Question

我是Angular的新手，想使用Angular中的ui-bootstrap来使用Modal（弹出窗体）。我正在学习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

您似乎将当前控制器与modalController混淆。您为模态声明controllerAs: 'ctrl'，但这并不意味着您可以在当前控制器中使用ctrl。

您有两个控制器，listEmployeeCtrl和ModalInstanceCtrl。只有第二个控制器（ModalInstanceCtrl）可以在其模板中使用ctrl。

如果您还想ctrl使用listEmployeeCtrl，则需要将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' })

Answer 2

您需要传递模态ID才能将其打开，这是缺失的！

Angular - ControllerAs中的函数无法执行

2 个答案: