ui bootstrap 模态需要两个控制器

Question

我正在尝试使用 ui-bootstrap angular 模块创建带有登录表单的模态 window。

我创建了两个控制器，但在那之后我意识到一个模态 window 的两个控制器太多了，所以我决定将两个控制器合并为一个。然后我得到了3个错误，我很长时间都无法解决，请帮助我。

angular.js:14239 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl

angular.js:14239 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl <- LoginModalCtrl

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl <- LoginModalCtrl <- LoginModalCtrl

我确定我拼写正确了所有依赖项。

在将它们组合在一起之前对我有用的两个控制器的代码

https://gist.github.com/anonymous/f0286abe139a02749d7b4e55d57b3fdd

最后是我通过混合它们创建的科学怪人代码。

app.controller('LoginModalCtrl', ['$scope', '$location', '$uibModalInstance', '$uibModal', 'authenticationService', function($scope, $uibModal, $uibModalInstance, $location, authenticationService) {
var $ctrl = this;
$ctrl.modalInstance = null;


$ctrl.animationsEnabled = true;

$ctrl.open = function(size, parentSelector) {
    var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-login' + parentSelector)) : undefined;

    $ctrl.modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-header',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'loginModalContent.html',
        backdropClass: "modal-backdrop",
        size: size,
        backdrop: true,
        appendTo: parentElem,

        resolve: {
            items: function() {
                return $ctrl.items;
            }
        }
    });
};

$ctrl.login = function() {
        //
        authenticationService.login($ctrl.loginData)
            .then(function(data) {

                $uibModalInstance.close();
                $location.url("/");

            }, function(error) {

            });
    };

    $ctrl.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
}]);

Answer 1

这是您问题的根源：

app.controller('LoginModalCtrl', 
  ['$scope', '$location', '$uibModalInstance', '$uibModal', 'authenticationService', 
  function($scope, $uibModal, $uibModalInstance, $location, authenticationService) {
...

所有提供程序都必须匹配它们被注入的顺序。当您使用 John Papa 的风格指南中的建议时，它会更好、更清晰、更容易阅读：

app.controller('LoginModalCtrl', LoginModalCtrl);

LoginModalCtrl.$inject = [
  '$scope', '$location', 
  '$uibModalInstance', '$uibModal', 
  'authenticationService'
];
function LoginModalCtrl(
  $scope, $location,
  $uibModalInstance, $uibModal, 
  authenticationService
) {
...
}

此外，您不应在同一个控制器中同时注入 $uibModal 和 $uibModalInstance。这意味着有些地方不对（除非你试图从第一个模态中打开第二个模态。不常见并且被认为是不好的做法）。

$uibModal 被注入控制器 打开模式。

$uibModalInstance 被注入控制器 即模态。

您打开模式时似乎也没有指定控制器：

$ctrl.modalInstance = $uibModal.open({
    ...
    controller: $ctrl.login
    ...
});

ui bootstrap 模态需要两个控制器

ui bootstrap modal needs two controllers

modal-dialog

angularjs

angular-ui-bootstrap

bootstrap-modal