ui bootstrap modal 未知提供者 $uibModalInstanceProvider

Question

我再次被我的角度 ui-bootstrap 模态窗口卡住了。

我有包含

的标题

<a ng-click="openLoginModal()">Zaloguj</a>

并拥有名为 headerCtrl.js 的控制器

app.controller('HeaderCtrl', ['$scope', '$uibModal', 'ApiService', function($scope, $uibModal, ApiService) {
"use strict";
$scope.allGames = ApiService.GetGames();

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

    var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        ariaLabelledBy: 'modal-header',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'app/views/modals/LoginModal.html',
        controller: 'LoginModalCtrl',
        controllerAs: '$ctrl',
        backdropClass: "modal-backdrop",
        size: size,
        backdrop: true,
        appendTo: parentElem,

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

}]);

在我点击“Zaloguj”后，它会启动 openLoginModal 方法模式显示但没有任何内容，并且在 cosole 中显示错误：

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

LoginModalCtrl 在第 14 行的 headerCtrl 中被引入：

controller: 'LoginModalCtrl',

LoginModalCtrl.js 代码：

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

$ctrl.animationsEnabled = true;

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

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

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

        }, function(error) {

        });
};

}]);

编辑 模态模板代码为：

<div class="modal-login">
<script type="text/ng-template" id="loginModalContent.html">
    <div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
            </div>
            <div class="modal-body">
                <form method="post" name="loginData">
                    <label for="login">Login:</label>
                    <input type="text" placeholder="login123" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />

                    <label for="password">Hasło:</label>
                    <input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />

                    <div class="row forget-valid">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <a href="/forget" title="zapomniałem hasła">Zapomniałem hasła</a>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right">
                            <span ng-show="(loginData.login.$touched && loginData.login.$invalid)||(loginData.password.$touched && loginData.password.$invalid)" class="error">
                                Pola nie mogą zostać puste!
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default close-button" ng-click="$ctrl.cancel()">Zamknij</button>
                <button type="button" ng-disabled="loginData.login.$invalid || loginData.password.$invalid" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
            </div>
        </div>
    </div>
</script>

帮助

Answer 1

您需要将$uibModal 作为参数包含在控制器函数中，就像您为$scope 所做的那样。