Dismiss angular modal on URL change - errors in console

Question

I'm using Angular bootstrap Modal to show a popup window. On clicking backspace outside the textarea / browser back button, i want to cancel the popup and continue with the url change. The default behaviour is that page behind the modal changes, but the modal remains on top.

In the controller for the modal instance, I added a

$scope.$on('$routeChangeStart', function() {...} );

It works, but I'm seeing errors whenever the controller is invoked again. The $modalInstance.dismiss() is called again, but inside the library, it throws an exception.

Here's the plunkr with code and repro steps. Watch the browser console for the error.

http://plnkr.co/UKXa6uFvy0ODHylMj28s

Am I doing something wrong, or is it a bug in modal.js?

Edit: I don't think my controller scope is right. Why would AddCtrl's $scope.$on('$routeChangeStart' be called when I navigate to MainCtrl?

Answer 1

Your plunker seems to be right.

There is $modal service bug here: the modal scope is still alive after you close a modal window. So modal scope continue to listen $routeChangeStart and I consider that double call of dismiss() cause an error.

This issue will be solved in next UI Bootstrap release.

I update and comment your code, hope this help - http://plnkr.co/edit/daf8dP?p=info

Answer 2

I have a comprehensive solution on dismissing Angular modal when route change / back button clicking here.