Ng-if in headers/footers. Any workaround?

ionic-v1
1

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.

2

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

https://docs.angularjs.org/api/ng/directive/ngClass

<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.

3

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

4

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.

5

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

6

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

7

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.