Invoking modal window in AngularJS Bootstrap UI using JavaScript

angular-ui-bootstrap, angularjs, modal-dialog

Solution

OK, so first of all the http://angular-ui.github.io/bootstrap/ has a `<modal>` directive and the `$dialog` service and both of those can be used to open modal windows.

The difference is that with the `<modal>` directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The `$dialog` service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).

Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the `$dialog` service is probably a way to go.

It is very easy to use and in its simplest form you could just write:

$dialog.dialog({}).open('modalContent.html');

To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Finally, here is the full reference documentation to the `$dialog` service described here: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Problem

Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button? I am new to AngularJS and tried searching the documentation here and here without luck. Thanks

Original source