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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With