动态更新离子angularjs中的标头 [英] Dynamically update header in ionic angularjs
问题描述
我已经被这个问题困扰了一段时间了。当我在不同的子页面之间导航时,离子内容得到了很好的更新,但是在我重新加载页面之前标题内容没有显示任何内容(使用网页浏览器),我认为它没有意义,因为我想制作一个移动应用程序。我正在动态加载内容(通过HTTP GET)
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";
});
我的应用程序配置为:
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');
}
]);
这是我的抽象视图
<ion-nav-bar class="bar bar-header bar-positive">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
它总是显示一个蓝色标题,里面没有任何内容,直到我重新加载浏览器。对于标题标题我已尝试过title和view-title属性但没有成功。
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
推荐答案
如果您正在使用并且只想在输入/ textarea填充(非空)时在标题栏中显示一个按钮,那么您可以执行以下。
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>
和ion-content里面 -
and inside "ion-content" -
<div class="row>
<textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>
否则只在标题栏中使用ng-if =Title将无效。不确定这是否适用于您的情况,但我希望它至少能以某种方式帮助。干杯。
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.
这篇关于动态更新离子angularjs中的标头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!