Ng-if in headers/footers. Any workaround?

There is a bug in Ionic where the ‘has-header’, ‘has-footer’, etc classes aren’t added to the ion-content element when a header or footer bar is used with an ng-if. This issue is noted in the docs. I couldn’t find an issue created for this problem in the github issue list and was hoping someone had a workaround solution.

Use an ngClass directive to conditionally apply the has-header and/or has-footer to your ion-content:

<ion-content ng-class="{'has-header': (ifHasHeader), 'has-footer': (ifHasFooter)}">

If you use the same expression as in your ng-if for the boolean values (which i marked as ifHasHeader and ifHasFooter) the result should be fine.

I considered that. I was thinking a new directive that automatically applies the class to the ion-content element might be better?

I’m not experienced enough with angularjs (yet…) to have any idea about that :wink: But I would imagine it would be kinda hard because the directive would’ve no way to know what the state for the ng-if is… Could be wrong about this though. Also, it could be possible but with significant performance costs which everyone wants to avoid. Again, I’m not sure about this.

I’m not experienced enough either! D’oh!

Just go for the ng-class solution then :stuck_out_tongue: Or try to get experienced with directives :open_mouth: (Like I should :blush:)

I’m trying to conditionally apply a class to my header (“bar-positive” or “bar-clear”) with a ternary operator, but it loads and then if I go between two it gets stuck after the first change.