在 ionic angularjs 中动态更新标头答案

【问题标题】：Dynamically update header in ionic angularjs在 ionic angularjs 中动态更新标头
【发布时间】：2015-06-08 19:29:16
【问题描述】：

我已经被这个问题难住了一段时间了。当我在不同的子页面之间导航时，离子内容得到了很好的更新，但标题内容在我重新加载页面（使用网络浏览器）之前没有显示任何内容，我认为这没有意义，因为我想制作一个移动应用程序.我正在动态加载内容（通过 HTTP GET）

在我的一个观点中，我有以下几点

<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>

在上述视图的控制器中，我有

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 属性都没有成功。

如果有人有解决方案，请告诉我

【问题讨论】：

标签： angularjs ionic-framework angularjs-routing ionic

【解决方案1】：

如果您正在使用并且只想在输入/文本区域被填充（非空）时在标题栏中显示一个按钮，那么您可以执行以下操作。

<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>

在“离子内容”内部 -

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

否则，仅在标题栏中使用 ng-if="Title" 将不起作用。不确定这是否适用于您的情况，但我希望它至少能在一些小方面有所帮助。干杯。

【讨论】：