Angularjs 角自举模态控制器不'；行不通

我有一个显示模式对话框的angular应用程序，我无法让controllerAs功能正常工作。以下是我的应用程序定义：

var deps = ['ngResource', 'ngRoute', 'swaggerUi', 'http-auth-interceptor', 'ngAnimate', 'angular-spinkit', 'ui.bootstrap'];
var myapp = angular.module('myApp', deps);

这是我调用模态的控制器和绑定到模态的控制器

myapp.controller('UsersController', ['$scope', '$log', '$uibModal', 'UsersService', function ($scope, $log, $uibModal, UsersService) {
    $scope.users = UsersService.getAll();
    $scope.openAddUserModal = function () {
        $uibModal.open({
            animation: false,
            templateUrl: 'partials/addUserModal.html',
            /* I've even tried controller:'AddUserModalCtrl as addUserModalCtrl' */
            controller: 'AddUserModalCtrl',
            controllerAs: 'addUserModalCtrl',
            bindToController: true
        });
    };
}]).controller('AddUserModalCtrl', ['$scope', '$log', '$uibModalInstance', function ($scope, $log, $uibModalInstance) {
    $scope.cancel = function () {
        console.log('userToAdd: ' + JSON.stringify($scope.userToAdd));
        $uibModalInstance.dismiss('cancel');
    };
    $scope.addUser = function () {
        console.log($scope.username);
    }
}])

以下是模式html：

<div class="modal-header">
    <h3 class="modal-title">Add new user</h3>
</div>
<div class="modal-body">
    <form role="form">
        <button ng-click="addUser()" type="submit" class="btn btn-default">Submit</button>
        <!-- this works if I remove the 'addUserModalCtrl' -->
        <button ng-click="addUserModalCtrl.cancel()" type="submit" class="btn btn-default">Cancel</button>
    </form>
</div>

添加新用户
提交
取消

这是因为您正在将方法添加到

$scope

。当使用

controllerAs

语法时，您不会这样做。您应该在

AddUserModalCtrl

中为函数使用

this.

符号

this.cancel = function () {
    console.log('userToAdd: ' + JSON.stringify(this.userToAdd));
    $uibModalInstance.dismiss('cancel');
};
this.addUser = function () {
    console.log(this.username);
}