ng-animate skips animations in modals and popups when ng-app is not on the body tag

[J5]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Many libraries add elements to the bottom of the body tag so they don't get caught by overflow: hidden settings. If the ng-app is not part of the body tag this means that the ng-app check that animate does (

angular.js/src/ngAnimate/animateQueue.js

Line 644 in 489224b

rootElementDetected = isMatchingElement(parentElement, $rootElement);

) always fails to find the root element and will skip adding animation classes to the element even though other angular code works fine.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

What is the expected behavior?

Animations should work regardless of where the ng-app is placed. Scoping in this case happens at the JavaScript level, not the dom level and the modal is considered part of the app. I would be happy to have to add an override directive or class to note that it is ok to do animations.

What is the motivation / use case for changing the behavior?

• Angular provides an ng-app directive so presumably it is not tied to the body tag.
• We specifically put it on the wrapper element so we can initialize various settings from the middleware while reducing the surface area for possible script injection attacks by doing so outside of the angular context.

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

We are using angular-1.5.5 but this looks like it is still broken in HEAD

Other information (e.g. stacktraces, related issues, suggestions how to fix)

[gkalpak]

The current behavior is intentional. You can achieve what you want using $animate.pin() (demo).
Closing since this works as expected and the usecase is already supported.

[J5]

Can this be added to the documentation to ng-animate? E.g. NOTE: The animated element must be inside the ng-app dom tree. For elements that are dynamically generated and appended outside the ng-app please see $animate.pin().

[gkalpak]

@J5, would you like submit a PR for the docs?