Why doesn't my directive's enter animation using ng-if run on first time when using AngularJS 1.5?

Question

http://codepen.io/anon/pen/MygQvb

I was using Angular 1.4.7 and then decided to upgrade. After that, all animations on directives using ng-if stopped working on the first time they were supposed to happen.

The example above on Codepen shows what I mean, if you toggle the ng-if it won't work on the first-time, but then it works just fine.

There are some similar questions, but none solved my problem, and I've never got this problem on a older version of Angular.

A real solution would be great, but if not possible, any workaround is welcome.

Answer 1

As jjmontes said, the workaround requires the directive's template to be declared in template instead of using templateUrl, but in this way I would not get no advantage on using templateCache, which for my application (not in the Codepen) I use along with Grunt, who generate it from my HTML files.

Everybody who uses Grunt hate repetitive work, and copying and pasting every change of my directive's HTML would be really tedious.

So, I would use $templateCache to .get() my directive's template and use it on the template property!

See it below:

angular
  .module('potatoApp', ['ngAnimate'])
  .run(template)
  // controllers, directives, stuff

function template($templateCache){

  // Grunt will do this work for me

  $templateCache.put('profile-float.directive.html', '<img ng-src="{{picture}}" alt="Profile image" ng-style="{\'max-width\': !higherWidth ? \'100%\' : \'\', \'max-height\': higherWidth ? \'100%\' : \'\'}">');
}

function profileFloat($templateCache){
  var directive = {
    restrict: 'E',
    scope: {
      picture: '='
    },
    template: $templateCache.get('profile-float.directive.html'), // Keeping the use of $templateCache
    link: link
  };

  // Rest of the directive's code
}

...

Codepen: http://codepen.io/anon/pen/NNKMvO

Works like charm! Hahaha