ui bootstrap modal未知提供者$ uibModalInstanceProvider

时间:2017-06-19 17:58:16

标签: angularjs modal-dialog angular-ui-bootstrap bootstrap-modal

我再次被我的角度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&lt; - $ uibModalInstance&lt; - LoginModalCtrl

在第14行的headerCtrl中引入LoginModalCtrl:

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>

帮助

1 个答案:

答案 0 :(得分:0)

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