我再次被我的角度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">×</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>
帮助
答案 0 :(得分:0)
您需要将$uibModal
作为参数包含在控制器功能中,就像您对$scope
所做的那样。