Ng-if doesn't get evaluated until slide animation finishes?


#1

I’ve got a list of items and an item template that conditionally shows a button at the top depending on the status of the item. I’ve got this button wrapped in an ng-if (not an ng-show).

When I click a list item and the detail view slides in, all looks good if the button status condition is positive and the conditional is displayed. But if the logic is false, I see the buttons appear momentarily and flicker out, causing the page to jump. This is something I’d normally use ng-cloak to deal with in a traditional Angular application, but it doesn’t seem to help at all here.

Any clues or suggestions would be welcome. Thanks in advance!


#2

Just to clarify, it appears that the template logic isn’t evaluated until after the animation finishes, so it’s present when the ion-view starts sliding in and then the ng-if content blinks out after it finishes, producing a visually jarring effect. ng-cloak has no effect as far as I can tell (maybe I’m doing something wrong?) This isn’t happening to anyone else? Using Ionic 1.0.0, Angular 1.3.15.


#3

It isn’t a perfect example but you can sort of see the same thing happening in this forked codepen

Hold and drag and you can see it pop into / out of existence once the view finishes sliding in. Not sure what to do about this; it’s obviously a lot more jarring in my local project than it is here.