UpdatesIn my previous post about creating modal/dialog service using Twitter Bootstrap and AngularJS, I used Angular UI Bootstrap version 0.5.0. As of version 0.6.0 the modal directive has changed a bit, the dialog object (directive) is no longer available for injection into your controllers; instead a modal instance is now created. The directive is also under the module ui.bootstrap.modal instead of ui.bootstrap.dialog.
- 21 Nov 2013: Added demo to show that version 2 of the service downloadable on GitHub works with AngularJS 1.2+
The changes are more than welcome in my opinion, have a look at the $modal service. One change in particular is the addition of a result promise on the modal instance. This alone reduced the amount of $scope.$on listeners and $rootScope.$broadcast statements I had to make in order to pass data back from modals or dialogs in my application to appropriate controllers. It also allowed me to eliminate all the $timeouts I had placed in my application due to waiting on modals/dialogs to fully close before possibly opening a new one. In the past, I found that the modal backdrop wasn't being destroyed in time before the next modal got created leaving an orphaned background in my application with no way of closing it - and thus rendering an application's interface unreachable. Now I can send the results of my modal/dialog back through the close or dismiss methods of the modal instance directly to the opening controller.
So I've rewritten my Angular dialog service to take advantage of the changes in Angular UI's Modal directive. Hope this serves you well and let me know if find any problems.
Demo & Files
What Do You Need?
Edit: It was pointed out to me by +Raf Kewl that if you're using AngularJS version 1.2 changes to the directive ng-bind-html-unsafe used in the dialog templates has been changed to just ng-bind-html and you'll need to include ngSanitize for the $sanitize object and for ng-bind-html to work.
- AngularJS - www.angularjs.org
(version 1.1.2+, although I believe it will work with versions 1.0.4(version 1.1.5 and less)
- Angular UI Boostrap - http://angular-ui.github.io/bootstrap/#/getting_started (version 0.6.0+, I highly recommend creating a custom version, you don't want to be sticking unused directives in your application)
- Twitter Bootstrap CSS - http://getbootstrap.com/ (version 2+, I've used version 3 successfully with this)
- Dialogs.js - https://github.com/m-e-conroy/angular-dialog-service (or dialogs.min.js)