javascript - Using AngularJS to close Bootstrap Modal window - Stack Overflow

admin管理员组

文章数量:1415137

I'm fairly new to AngularJS, so forgive me if this is a simple question; I have an AngularJS (v 1.6) app with a user login via a bootstrap modal window. After the user successfully logs in, I want the modal window to be closed by Angular;

The User login is via a POST call to PHP which queries the database - this all works as expected, but i need the modal window to close if the login was successful. (The PHP responds with a JSON object) In particular, im looking to replace this code in the Angular controller:

//window.location.href = '/IDD';

with a mand to close the modal window.

HTML Code:

<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>

And my Angular Controller:

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

I'm fairly new to AngularJS, so forgive me if this is a simple question; I have an AngularJS (v 1.6) app with a user login via a bootstrap modal window. After the user successfully logs in, I want the modal window to be closed by Angular;

The User login is via a POST call to PHP which queries the database - this all works as expected, but i need the modal window to close if the login was successful. (The PHP responds with a JSON object) In particular, im looking to replace this code in the Angular controller:

//window.location.href = '/IDD';

with a mand to close the modal window.

HTML Code:

<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>

And my Angular Controller:

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

• javascript
• angularjs
• html
• twitter-bootstrap

Share Improve this question Follow edited May 28, 2018 at 4:38 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked May 27, 2018 at 16:49 BlissSolBlissSol 41811 gold badge1313 silver badges2828 bronze badges 3

• 1 Take a look at ui-bootstrap angular-ui.github.io/bootstrap – Marcus Höglund Commented May 27, 2018 at 17:12
• 1 Replace the bootstrap.js with the $uibModal Service. See angular-ui.github.io/bootstrap/#!modal – georgeawg Commented May 28, 2018 at 4:44
• Can you show the code where you are opening the modal – Black Mamba Commented May 28, 2018 at 4:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

use the following on login successful

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

You can achieve that with $('loginModal').modal('hide'); or $('loginModal').modal('toggle');

本文标签： javascriptUsing AngularJS to close Bootstrap Modal windowStack Overflow