enter/leave events not fired in certain circumstances with ng-repeat (animated content outside app root)

[wesleycho]

I am not sure if this is reproducible with the other directives like ng-if or ng-show/ng-hide, but there was a bug reported in angular-ui/bootstrap#4222 where it turns out the events are not fired, nor the animation running - here is a reproduction where it works normally for a defined JavaScript animation with jQuery with ng-repeat, but inside the modal element, it does not log any output.

[Narretz]

That's because the modal is outside of the ng-app root element. In that case ngAnimate cannot detect if animations are defined. I'm not sure if this is intentional, or if it should work.

[Narretz]

There's the $animate.pin API for that. You should call that after the modal element has been added to the DOM. However, it's currently broken, I'm looking into it.

[wesleycho]

Hm, so would you say that it is highly recommended to have the app bootstrapped on body or a higher element? I typically just do angular.bootstrap(document, [...]) myself.

[Narretz]

It's always the best bet. But once $animate.pin is fixed, bootstrap ui should use it inside the modal function and pin the modal to the $rootElement. Bascically, all libraries that add fragment DOM like this should do it, to be one the safe side.

[gkalpak]

Something to keep in mind wrt $animate.pin() is that it is not available prior to v1.4, so if you have a version of a library that tries to be compatible with angular v1.3+, it might be a problem.

Just a heads up...

[wesleycho]

Got it - we are about to drop 1.3 support in our next release, so that shouldn't be an issue.