javascript - 使用 AngularJS 关闭 Bootstrap Modal 窗口
问题描述
我对AngularJS相当陌生,所以如果这是一个简单的问题,请原谅我;我有一个 AngularJS (v 1.6) 应用程序,用户通过引导模式窗口登录。用户成功登录后,我希望 Angular 关闭模态窗口;
用户登录是通过对查询数据库的 PHP 的 POST 调用 - 这一切都按预期工作,但如果登录成功,我需要关闭模式窗口。(PHP 以 JSON 对象响应)特别是,我希望在 Angular 控制器中替换此代码:
//window.location.href = '/IDD';
使用命令关闭模式窗口。
HTML 代码:
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="">JDCSupport</a>
<div class="nav navbar-nav" style="flex-direction: row;">
<p class="text-center">{{usrName}}</p>
<div data-ng-show="btnLogin">
<button class="btn btn-success btn-sm pull-xs-right"
style="padding: 10px;" data-toggle="modal"
data-target="#loginModal">
Login
</button>
</div>
<div data-ng-show="btnLogout">
<button class="btn btn-warning btn-sm pull-xs-right"
style="padding: 10px; margin-right: 10px;"
type="button">
Logout
</button>
</div>
<div data-ng-show="btnMenu">
<button class="navbar-toggler pull-xs-right" style="padding: 10px;" id="navbarSideButton" type="button">☰</button>
</div>
</div>
<ul class="navbar-side" id="navbarSide">
<li class="navbar-side-item">
<a href="#/" class="side-link">Home</a>
</li>
<li class="navbar-side-item">
<a href="#!roster" class="side-link">Staff Roster</a>
</li>
<li class="navbar-side-item">
<a href="#!photos" class="side-link">Photos</a>
</li>
<li class="navbar-side-item">
<a href="#!message" class="side-link">Messages</a>
</li>
</ul>
<div class="overlay"></div>
</nav>
<div id="loginModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="col-lg-8 col-sm-8 col-12 main-section">
<div class="modal-content">
<div class="col-lg-12 col-sm-12 col-12 user-img">
<img src="images/man.png" alt="">
</div>
<div class="col-lg-12 col-sm-12 col-12 user-name">
<h1>User Login</h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="col-lg-12 col-sm-12 col-12 form-input">
<form ng-submit="loginForm()" name="loginform" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" data-ng-model="user.username" name="username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" data-ng-model="user.password" name="password" required>
</div>
<button type="submit" class="btn btn-success">Login</button>
<div class="alert alert-danger" data-ng-show="errorMsg">{{error}}</div>
</form>
</div>
<div class="col-lg-12 col-sm-12 col-12 link-part">
<a href="" target="_blank">Forgot Password?</a>
</div>
</div>
</div>
</div>
</div>
还有我的 Angular 控制器:
app.controller ("logController", function ($scope, $http) {
$scope.btnLogin = true;
$scope.btnLogout = false;
$scope.btnMenu = false;
$scope.errorMsg = false;
$scope.loginForm = function() {
var ans="";
var encodedString = 'username=' +
encodeURIComponent(this.user.username) +
'&password=' +
encodeURIComponent(this.user.password);
$http({
method : 'POST',
url : 'php/login.php',
data : encodedString,
headers : {'Content-type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
console.log(response);
ans = response.data;
if (ans.message == 'correct' ) {
$scope.btnLogin = false;
$scope.btnLogout = true;
$scope.btnMenu = true;
//window.location.href = '/IDD';
} else {
$scope.errorMsg = true;
$scope.error = ans.error;
}
},
function (response) {
//error handling
});
};
});
解决方案
在登录成功时使用以下内容
$('#loginModal').modal('hide');
推荐阅读
- android - Android Firebase java.lang.NoSuchMethodError:类中没有虚拟方法zzbqo()Z
- powerbi - PowerBI Embedded,书签窗格未显示
- c++ - Leetcode 297 序列化和反序列化二叉树
- c# - 控制台应用程序的一部分在 C# 几分钟后停止工作。请自行复制并粘贴此控制台应用程序代码
- reactjs - 反应调度返回承诺而不是普通对象
- python - Pandas - 二进制矩阵和字符串数据(如何堆叠字符串数据/换行?)
- javascript - 无法在某些项目上使用浏览器
- php - 使用 wget 或 curl 使用 POST 数据登录网站
- c# - 所有 NuGet 版本到 .NET Framework 到 AssemblyVersionAttribute 映射的主列表?
- javascript - 在 JavaScript 中将结构化数据添加到数组