10

I could not find $dialog service in AngularUI and I tried to explore a simple messageBox() to create a confirmation dialog box using $modal. Could not find that either.

Can somebody suggest me how to create a simple dialog (say for delete confirmation) using AngularJS / AngularUI?

Thank you in advance.

Sagar Ranglani
  • 5,491
  • 4
  • 34
  • 47

1 Answers1

20

The $dialog service was refactored into $modal for version 0.6.0 of ui-bootstrap. The functionality from $dialog should still be available, just through $modal instead.

According to the docs, you should make sure you have included bootstrap's css and angular.js in your page as well as bootstrap-ui's JS, which you can download from the doc site. I'd look at the 'create your own' link if you only need to use the $modal service and not the other directives.

If these files are included in your page, then make sure the definition of your angular module includes ui.bootstrap as a dependency. e.g.

var app = angular.module('myApp', ['ui.bootstrap']);

If this is done then you should be able to inject the $modal service within your module, like you would with any other service.

app.controller('myController', function($scope, $modal) {
    $scope.openModal = function() {
       // Can use $modal service as per examples in doc page
    };
});

As for solid examples, the docs page has great examples on the page and in plunker (so you can play with them) for each of their services and directives. I would like to link to the plunker here, but I don't seem able to.

Andyrooger
  • 6,748
  • 1
  • 43
  • 44
  • 1
    Thank you for the quick response. $dialog had a method named messageBox(), which is not present with $modal service. I just want to create a simple confirmation box, is there any other way except using $modal.open()? – Sagar Ranglani Oct 19 '13 at 17:26
  • 6
    Yes, unfortunately this doesn't exist anymore and there is an [open issue](https://github.com/angular-ui/bootstrap/issues/996) about adding a migration guide. One of the [comments](https://github.com/angular-ui/bootstrap/issues/996#issuecomment-25388935) has an example service using `$modal` that may do what you want, otherwise you would need to downgrade bootstrap-ui or write your own service with the same functionality. – Andyrooger Oct 19 '13 at 17:35