ngAnimate - strange behavior when using external templates

[alexus85]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (see above))

Current behavior:
The animation does not start properly when using external template for my list-entry component. It only works while the template is defined as a string.

Expected / new behavior:
The animation should start whether the template is defined as string or it's an external file.

Minimal reproduction of the problem with instructions:
(using external template) -> http://plnkr.co/edit/wyulABVJp6m8OWrbMIi3
(template defined as string) -> http://plnkr.co/edit/BP6OsgYA6SkVduoTBERk?p=preview

Angular version:
both angularjs and angular-animate are 1.6.2

Browser:
It's happening in all browsers.

[frederikprijck]

Possibly related #14074 ?

[alandrieu-gimel]

Change your ng-repeat location (into division by example).

List of items:
<div ng-repeat="item in $ctrl.games">
  <list-entry  game="{{item}}" class="repeat-animation">
  </list-entry>
</div>

[alexus85]

@alandrieu-gimel - also had to apply the 'repeat-animation' class for that div in order to get the animation working as well.

List of items:
<div ng-repeat="item in $ctrl.games" class="repeat-animation">
	<list-entry  game="{{item}}"></list-entry>
</div>

Even though it seems to be working well with this workaround, I still wonder as why it doesn't work in my example above.

[alandrieu-gimel]

It doesn't work because your ng-repeat is not at the right place. You must repeat entry element like this :

loop (list-entry){
  entry
}

<!-- My list-entry-component -->
<div ng-repeat="entry in list-entry">
        <!-- My entry-component -->
	<entry/>
</div>

[frederikprijck]

@alandrieu-gimel

It doesn't work because your ng-repeat is not at the right place.

Despite the fact that it's not working with the animation in the plunkr, It actually is okay to use <entry ng-repeat="...">, I'm not sure what you mean with because your ng-repeat is not at the right place.

[alexus85]

@frederikprijck
that's what I thought,. I've been using this technique <entry ng-repeat="..."> without any issues up until I started playing around with the ngAnimate.

[gkalpak]

@frederikprijck, is right. This is a duplicate of #14074. See #14074 (comment) for some details/workaround.

Closing this, since the other issue hasmore context/discussion.