Modal - can't close if using angular 1.4
alippai opened this issue · 20 comments
You can't close modals with version 0.13. Angular-bootstrap 0.12 modal works well with angular 1.4.
Angular 1.3 + bootstrap 0.13 works too.
Plunker please.
There is a known issue with Angular 1.4 and the Modal/Carousel directives. The ngAnimate module had some significant changes documented here that breaks how those directives are chaining animations. The area that needs to be addressed in the modal is here. As a workaround, I changed that line from:
domEl.one('$animate:close', function closeFn() {
$rootScope.$evalAsync(afterAnimating);
}
To:
$rootScope.$evalAsync(afterAnimating);
You lose the closing animation. @chrisirhc is aware of the problem.
@RobJacobs What you're refering to is probably #3615 ?
@alippai specifically said he 'cant close modals' which would suggest that the modal always stays open after opening once. Thats why I asked for a plunkr reproducing this problem.
Reading this again, the issue is supposedly with AngularJS 1.4, which we don't currently support since it's still in beta.
If you're using UI Bootstrap, use 0.13 with Angular 1.3 and it's all good.
Only the backdrop didn't disappear, the dialog closed successfully. I couldn't create a plunker as the official demo worked with angular 1.4.
When you create a plunkr you can choose which library versions you want to use.
I referenced the correct versions, but couldn't reproduce the wrong behaviour.
That's when an issue gets closed 😉
@alippai is correct, the modal will close, but the backdrop element does not get removed. Reason being the $animate api has changed on how to attach event handlers. It needs to be:
$animate.on(element, 'event', function() {})
So the afterAnimating function never gets called which is responsible from removing the backdrop element. Oddly enough, plunkr does not exhibit this behavior but I've been testing Angular 1.4 compatibility locally with the documentation page and that's how I noticed the problem.
Reopening. Related: #3624
with AngularJS 1.4, which we don't currently support since it's still in beta.
Please note, that your statement above is false. AngularJS 1.4 is out of beta, it's a RC now.
We love to use the fresh version of the 3rd parties, caught this bug testing the upgrade path on an experimental branch. Few weeks from now newbies will download AngularJS 1.4 with Angular Bootstrap 0.13 and it won't work, don't kill their learning process please. I can stick with the old version for months, they can't and won't do that.
This looks like a reasonable support to add, check for the presence of $animate.on and use that instead of element.on('$animate:close'…. Feel free to submit PRs. I believe the same fix can be applied to the Carousel.
angular 1.4 here too, and this is the only critical bug that prevents me from upgrading to 0.13... It would be super cool to have this fixed soon!
Continuing this discussion in #3633 since it has a more fitting issue title and description, describing exactly what is discussed here.
+1
Just for the record, this is not just an Angular 1.4 issue. I am using Angular 1.3 and I started getting this issue when I upgraded from 0.12.1 to 0.13.0. Upgrading to the latest version of Angular 1.3 (1.3.16) did not solve my issue. However, it seems to point to the same lines of code as the Angular 1.4 issue (listening for the '$animate:close' event). That event never fires in my case. Globally turning off animation with $animate.enabled(false) makes modal dialogs start to close again.
Plunker that does not close backdrop (only if app depends on ngAnimate): http://plnkr.co/edit/lQMQm5NJuRHkTBfER7cq?p=preview
I had a problem where the modal itself would close, but the modal backdrop would remain.
Downgrading angular.js and angular-animate.js to 1.3.16 resolved this issue for me.
Modal closes but backdrop remains with ui-bootstrap 0.13 and angular 1.4. Can be worked around by setting the animation property to false when calling $modal.open()
I just go ahead and repeat myself:
Continuing this discussion in #3633 since it has a more fitting issue title and description, describing exactly what is discussed here.
I'll close the comments here and encourage everyone to continue this discussion in #3633 so we can keep everything in one place instead of having to manage duplicate issues.