Has-header ignores value if 2 way bound

<header class="bar bar-header bar-positive" ng-show="showHeader">
HEADER
</header>
<content has-header="{{showHeader}}">
CONTENT
</content>

I have a method which flips showHeader, and I can see it changing in the HTML. The content dos not update position, however.
Statically assigning has-header=“true” or false works, but the view always treat it as “false” when I use two way data binding (so $scope.showHeader = true does not result in a lowered content, even though the HTML looks good).

Appreciate it!

The ionicContent directive doesn’t use the has-header attribute in the scope. It is static. So, 2 way binding will not help as there is nothing watching the attribute.

    compile: function(element, attr, transclude) {
      if(attr.hasHeader == "true") { element.addClass('has-header'); }
      if(attr.hasSubheader == "true") { element.addClass('has-subheader'); }
      if(attr.hasFooter == "true") { element.addClass('has-footer'); }
      if(attr.hasTabs == "true") { element.addClass('has-tabs'); }
      if(attr.padding == "true") { element.find('div').addClass('padding'); }

I dug through the code a bit to see if there is anyway to change the header state, I didn’t see anything. Maybe I missed something, but I think you’ll need a feature request to be able to hide/show the header on demand.

In the past, there might have been a “hide-header-bar” attribute, but I can’t find it in the code anymore. See : Hide-header-bar flickers

1 Like