Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

animations on repeat within a modal #4222

Closed
trickpattyFH20 opened this issue Aug 17, 2015 · 4 comments
Closed

animations on repeat within a modal #4222

trickpattyFH20 opened this issue Aug 17, 2015 · 4 comments
Labels
component: modal needs: investigation type: bug

Comments

@trickpattyFH20
Copy link
Contributor

angular's animation hooks don't exist on elements within a bootstrap modal...
any idea on a workaround?
I made a plunker:
UPDATE:
@wesleycho I stripped down the plunker a little bit:
http://plnkr.co/edit/9AXi1I7P7YN7wqMS8RDS?p=preview
@wesleycho
Copy link
Contributor

Can you strip this down to a simple reproduction? That is a lot of code to parse through...

@wesleycho
Copy link
Contributor

This appears to be an Angular bug - I modified the Plunker here to illustrate it.

@wesleycho wesleycho mentioned this issue Aug 18, 2015
Closed
@drewbourne
Copy link

I ran into this issue today, and my investigation is as follows:

This issue is triggered when the body element is not contained by the ng-app. When the $animate service is checking if any of the elements inside the modal can be animated the checks inside the angular-animate animationsDisabled() function fail as those element are not inside the $rootElement of the ng-app.

In this plunkr I have moved the ng-app on to the body element and the animations inside the modal now work.

http://plnkr.co/edit/YncQNWiSFvDrKHXEeQcn?p=preview

Suggested fixes:

  • ensure the ng-app is on or a parent of the body element
  • update modal to use the $rootElement of the ng-app
  • add an option to $modalProvide to specify which element to attach the modals to

@wesleycho
Copy link
Contributor

Thanks for the investigation @drewbourne!

Given the nature of this problem, I don't think there is anything that should be done by Angular or UI Bootstrap. I would even go as far as to say there is likely no reason not to have the ng-app on <body> or <html>, or just manually bootstrapping on document. The modal is currently set up to append to the body element by default, which is necessary for CSS reasons - there is a feature request to allow the user to configure appending to a particular element, which we will implement at some point for accessibility reasons, but otherwise this would be a breaking change with larger ramifications.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component: modal needs: investigation type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@drewbourne @wesleycho @trickpattyFH20