问题描述:

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

网友答案:

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.

相关阅读:
Top