Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I have been stumped on this problem for a while now . when i navigate between different child page the ion-content is well updated but the header content is not showing anything until I reload the page (using web browser), I think it doesn't make sense since I would like to make a mobile app. I'm loading the content dynamically (via HTTP GET)

In one of my views, I have the following

<ion-view cache-view="false">
      <ion-nav-buttons side="right">
         <button class="button button-icon icon ion-chevron-right"></button>
      <ion-nav-buttons>
      <ion-nav-buttons side="left">
         <button class="button button-icon icon ion-chevron-left"></button>
      <ion-nav-buttons>
      <ion-nav-title> 
         <h1>{{header.title}}</h1>
      </ion-nav-title>
            <ion-content>
            <ul class="list">
                <li class="item item-checkbox" ng-repeat="item in list">
                    <label class="checkbox"> <input type="checkbox" ng-click="selectcategories(item.id)" 
                    ng-checked="selection.indexOf(item.id) > -1"></label>
                    {{ item.catname |uppercase}}
                </li>
            </ul>
            </ion-content>
    </ion-view>

in the controller for the above view, I have

app.controller('usercategoryController',
    function($scope,getcategories,$log)
        {
            $log.info("userCategoryController Called ...");
            $scope.list=getcategories;
            $scope.header={};
            $scope.header.title="Categories";
    });

my app config is :

app.config(['$stateProvider','$urlRouterProvider',
            function($stateProvider,$urlRouterProvider)
            {
                 $stateProvider

                state('user',{
                     abstract:true,
                     url:"/user",
                     templateUrl:'views/user.html',
                 }).state('user.categories',{
                     url:"/categories",
                     templateUrl:'views/categories.html',
                     controller: 'usercategoryController',
                     resolve:{
                         getcategories: function(userService) {
                             return userService.getcategories();
                        }
                     }, 

                 })
                 $urlRouterProvider.otherwise('/user');
            }
 ]);

and here is my abstract view

<ion-nav-bar class="bar bar-header bar-positive">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

it always shows a blue header with no content inside till i reload the browser. for the header title I have tried both title and view-title attribute with no success .

if someone has a solution please let me know

share|improve this question

If you are using and you want to show a button in the header bar only when an input/textarea is filled (not empty), then you can do the following.

<ion-header-bar class="bar-light">
  <h1 class="title">{{$root.Title}}</h1>
  <div class="buttons">
    <button class="button button-clear icon ion-checkmark-round" ng-click="" ng-if="$root.Title"></button>
  </div>
</ion-header-bar>

and inside "ion-content" -

<div class="row>
  <textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>

Otherwise just using ng-if="Title" in the header bar will not work. Not sure if this is applicable in your case, but I hope it can help in some small way at least. Cheers.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.