CODEWITHSUNDEEP
javascriptangularjstwitter-bootstraptwitter-bootstrap-3bootstrap-modal
Asfandyar Sheikh
Asfandyar Sheikh

Reputation: 23

How to open a modal using angular (without ui bootstrap)?

I have been trying to make make the modal appear, but have failed to do so after multiple attempts.

Here is the code for the modal:

<!-- Login modal -->   
<div class="modal fade" id="login_2" tabindex="-1" role="dialog" aria-labelledby="myLogin" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-popup">
                <a href="#" class="close-link"><i class="icon_close_alt2"></i></a>
                <form action="#" class="popup-form" id="myLogin">
                    <div class="login_icon"><i class="icon_lock_alt"></i></div>
                    <input type="text" class="form-control form-white" placeholder="Username">
                    <input type="text" class="form-control form-white" placeholder="Password">
                    <div class="text-left">
                        <a href="#">Forgot Password?</a>
                    </div>
                    <button type="submit" class="btn btn-submit">Submit</button>
                </form>
            </div>
        </div>
    </div><!-- End modal -->

What I want to do is to load this modal automatically if a certain variable is set in $stateParams in the controller. Otherwise, it should remain hidden. I have tried angular.element('login_2').modal() without success

Upvotes: 1

Views: 1264

Answers (3)

csschapker
csschapker

Reputation: 129

If you're open to using an existing library (that isn't ui bootstrap), I recommend ngDialog. You can use custom HTML templates and styles and it's just for creating modals.

Upvotes: 1

pr0gramista
pr0gramista

Reputation: 9008

Use ng-show link to documentation.

You can make something like: 

<div class="modal fade" ng-show="showMyModal" ...

And a checkbox for controlling it (but you can do anything)

<input type="checkbox" ng-model="showMyModal">

Remember that you can animate ngShow with ngAnimate.

Upvotes: 1

Marko
Marko

Reputation: 128

Just toggle it like this.

$('#login_2').modal('show');

Upvotes: 0

Related Questions