ui bootstrap modal 需要两个控制器

Question

我正在尝试使用 ui-bootstrap 角度模块创建带有登录表单的模式窗口。

我创建了两个控制器，但之后我意识到一个模态窗口的两个控制器太多了，所以我决定将两个控制器合并为一个。然后我遇到了3个我无法解决的错误，请帮助我。

angular.js:14239 错误：[$injector:unpr] 未知提供者：$uibModalInstanceProvider

angular.js:14239 错误：[$injector:unpr] 未知提供者：$uibModalInstanceProvider

错误：[$injector:unpr] 未知提供者：$uibModalInstanceProvider

我确信我拼写正确所有依赖项。

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

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
    ...
});