Question

我对AngularJS很新，所以如果这是一个简单的问题，请原谅我; 我有一个AngularJS（v 1.6）应用程序，用户通过bootstrap模式窗口登录。用户成功登录后，我希望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">&#9776;</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">&times;</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>

我的角度控制器：

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

Answer 1

在登录成功时使用以下内容

 $('#loginModal').modal('hide');

Answer 2

您可以使用$('loginModal').modal('hide');或$('loginModal').modal('toggle');

实现这一目标

使用AngularJS关闭Bootstrap Modal窗口

2 个答案: