Geek Answers Handbook

Why is my directive not introducing animation using ng-if the first time I use AngularJS 1.5?

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

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

The example above on Codepen shows what I mean, if you switch ng-if , it will not work the first time, but then it works fine.

There are several similar questions, but no one solved my problem, and I never had this problem in an older version of Angular.

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

+7
javascript angularjs angularjs-directive ng-animate
source share
2 answers

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

Everyone who uses the repetitive work of Grunt, and copying and pasting every change to my directory HTML will be really tedious.

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

See 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 code } ...

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

It works like a charm! Hahaha

+3
source share

In your Angular example, ng-enter and ng-enter-active not added for the first time.

Your code works if you use template instead of templateUrl in your directive, avoiding $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 ...
+2
source share

More articles:


All Articles