CODEWITHSUNDEEP
twitter-bootstrapangularjs
kolosy
kolosy

Reputation: 3099

bootstrap modal dialog not coming up programmatically

I have a page with two modal dialogs. One is activated through data attributes, and works fine. The other is activated through a $('#myDialog').modal('show'). When I invoke this dialog, I only get the backdrop, but don't see the dialog. Closer inspection shows that the animation that brings it in from the top of the screen doesn't seem to be firing (it's still positioned off-screen). It's not the dialog itself (I've tried switching code around to bring up the "working" dialog with JS, to no avail).

Here's the code that's supposed to bring it up (coffeescript)

    $scope.unlinkAccount = (account) ->
      $('#deleteAlert').modal('show')

Here's the modal html

<div id="deleteAlert" class="modal hide fade">
    <div class="modal-header">
        <h2>Are you sure you want to unlink {{deleteTarget.token}}?</h2>
    </div>
    <div class="modal-footer">
        <button class="btn" >Cancel</button>
        <button class="btn btn-primary" ng-click="linkAccount()">Link</button>
    </div>
</div>

Idears?

Upvotes: 1

Views: 1305

Answers (1)

petr k.
petr k.

Reputation: 8100

I'd say do not manipulate DOM in your controller code. Take the Angular way instead, which in your case would be to use Angular-UI Bootstrap. It has the $dialog service which you can leverage while keeping your controller code testable.

Upvotes: 1

Related Questions