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.

Ance

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

Ance

Answer 2

In your example Angular is not adding ng-enter and ng-enter-active the first time.

Your code works if, in your directive, you use template instead of templateUrl, avoiding the $templateCache:

function profileFloat(){
  var directive = {
    restrict: 'E',
    scope: {
      picture: '='
    },
    template: '<img ng-src="{{picture}}" alt="Profile image" ng-style="{\'max-width\': !higherWidth ? \'100%\' : \'\', \'max-height\': higherWidth ? \'100%\' : \'\'}">',
    link: link
  };

  return directive;

  // Rest of the directive code
  ...

• Updated codepen, with transition set to 5 sec for easier debugging of classes: http://codepen.io/anon/pen/qZWope
• The workaround is mentioned here: https://github.com/angular/angular.js/issues/12612 , seems this is a tricky bug, not sure if it'll be fixed soon or even if this has been reported for 1.5.

Polygraph

I must say, I had read that Angular issue at GitHub just today while troubleshooting a similar problem, or I would have never found this ^_^. Nicely written first question, welcome to Stack Overflow! – Polygraph

Wow! You killed it! Thanks for the compliment, and also, thanks for sending the url mentioning the workaround. Well, using that solution really not cheered me up that much, because of the trouble of editing it later, but it made me think on a great way to keep my HTML file... Hahahaha I'll post it as a answer, read it later! Again, thanks jjmontes! (: – Ance

Thanks for the workaround! I was facing the exact same problem, and defining my template inline solved the issue. Well-written question, and well-written answer. – Halfassed