$animateCss used on a directive that uses a templateUrl breaks

[CodySchaaf]

$animateCss ends up operating on an element that does not end up in the view after the directive is rendered.

As you can see in this plunker if you uncomment the template (and comment the templateUrl) the element is correctly styled and appears in the view. However when the directive is using tamplateUrl the element is not styled.

https://plnkr.co/edit/yO1AvvupoveRi3IWevVL?p=preview

This was not the case in 1.4.x, but is a new issue when upgrading to 1.5.

While the directive is using templateUrl you can also check the console and click reveal in elements pane to see that no element is revealed.

This issue means that you can not do any clean up in the done function or any further styling (my issue is I want to scroll the element into view once it is expanded since the element would be too short to scroll into view before. You can also see that '-active' and '-add-active' styles are not removed.

[CodySchaaf]

I also see this error in my own project Cannot read property '$$ngAnimateParentKey' of null which comes from this line

return (c.$$ngAnimateParentKey || (c.$$ngAnimateParentKey = ++K)) + "-" + a.getAttribute("class") + "-" + b

[Narretz]

Thanks for reporting. Can you please create a plnkr that repdroduces the error you mentioned?

[CodySchaaf]

There is a plnkr included in the original story, here it is again. Let me know if this one doesn't work.

https://plnkr.co/edit/yO1AvvupoveRi3IWevVL?p=preview

[Narretz]

@CodySchaaf You said you have an error in your project. I was specifically asking for a repro for that error, because your posted plnkr doesn't throw an error.

[Narretz]

Also, as far as I can see, the behavior in 1.4.9 and 1.5.0 is the same: no animation with templateUrl.

[Narretz]

So I doubt this worked in 1.4.x, because this inherently happens because with templateUrl, it takes at least a few milliseconds until the template is available and the direcitve is linked. But the animation runs before that happens, so there's nothing to animate. This is a known limitation. You can fix this by putting the template in the cache: https://plnkr.co/edit/o7SyQNY5oMZxAKVh7Eeg?p=preview

[CodySchaaf]

Oh that makes sense. Sorry.

I will try to get a working repro for that. I suspect it has to do with angular attempting to preform some clean up action on the element that expects it to have a parentNode since c is var c = a.parentNode and a is the element in question (sorry about using the minified code).

Looks like you are correct with 1.4.9 having similar behavior in the plnkr, the issue in my application was not present in 1.4.9 though so I will dig deeper.

Thanks for your help.

[CodySchaaf]

Sounds like there might be a different issue then, thanks for your help. It definitely worked in app before the upgrade, so maybe it is just timing changes that have surfaced this issue now with 1.5. I'll report back if I can get a plnkr that is broken in 1.4.9 but working in 1.5.0.

Probably wouldn't be an issue in production since the templates are cached there, but we don't currently cache them in development (might be a good time to get the environments in sync).