Bootstrap modal dialog and Angular binding not working

Question

I'm simply trying to set up a warning dialog, and trying out Bootstrap modal for starters.

Bootstrap modal: http://getbootstrap.com/javascript/#modals

The modal fires but it does NOT show my modalTitle and modalBody values !

HTML snippet here (note the vm.modalTitle and vm.modalBody scope vars) -

<!-- Bootstrap Modal Dialog Template-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel"><span ng-model="vm.modalTitle"></span></h4>
        </div>
        <div class="modal-body"><span ng-model="vm.modalBody"></span></div>
        <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>

and my controller code :

 vm.modalTitle = '';   vars initialized at the top of my controller
 vm.modalBody = '';
 ...
 function sendRequest(){
      if (data.status == 'FAIL') {
                if (data.messages.length > 0) {
                    logErr("Error submitting aggregation request: " + data.messages[0]);
                    vm.modalTitle = "Error submitting aggregation query !";
                    vm.modalBody = data.messages[0];
                    $('#myModal').modal('toggle');  
                    $('#myModal').on('hide.bs.modal', function (e) {
                        // fired when modal is hidden from user
                    })
                    return;
                }
     }
   }

The modal fires but it does NOT show my modalTitle and modalBody values !

How are you doing the request? I'd guess Angular is not aware of the changes in the vm model and view is not being updated. Try firing a digest cycle with $apply() before toggling the modal. — Bertrand
– Bertrand, Commented Oct 10, 2014 at 16:45
@Bema, if I issue $scope.$apply(); then the error says "$digest already in progress". — bob.mazzo
– bob.mazzo, Commented Oct 10, 2014 at 18:39

MBielski · Accepted Answer · 2014-10-10 17:43:01Z

2

I tried this route when I first learned Angular and very quickly got frustrated with the hacks that I had to do to get it to work. Your best bet is to use the AngularUI modal. It wraps the Bootstrap modal very nicely. http://angular-ui.github.io/bootstrap/.

answered Oct 10, 2014 at 17:43

MBielski

6,6103 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bob.mazzo Over a year ago

yes I actually have downloaded angular ui bootstrap, but I also found it's kind of code-heavy and awkward. Perhaps I should revisit that.

MBielski Over a year ago

AngularStrap (mgcrea.github.io/angular-strap) is also a viable option. Either one is better than trying to hack together something on your own, especially when starting out.

Collectives™ on Stack Overflow

Bootstrap modal dialog and Angular binding not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related