<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