离子 - 无法在导航栏上打印标题

Question

我正在使用 angular 和 ionic，我目前无法在导航栏中打印任何标题。

我有一个包含多个嵌套视图的非常复杂的设置。

以下是州列表：

state('app', {
  cache: false,
  url: '/app',
  abstract: true,
  templateUrl: './sections/menu/menu.tpl.html',
  controller: 'menuCtrl'
}).state('app.home', {
  url: '/home',
  views: {
    'appContent': {
      templateUrl: './sections/menu/pageViewsContainer.tpl.html',
      controller: 'homeCTRL'
    },
    'Details@app.home': {
      templateUrl: './sections/home/home.tpl.html'
    },
    'List@app.home': {
      templateUrl: './sections/List/List.tpl.html'
    }
  }
}).state('app.details', {
  name: 'appDetails',
  url: '/:ID',
  views: {
    'appContent': {
      templateUrl: './sections/menu/pageViewsContainer.tpl.html',
      controller: 'DetailsCtrl'
    },
    'zoneDetails@app.details': {
      templateUrl: './sections/Details/Details/details.tpl.html'
    },
    'zoneList@app.details': {
      templateUrl: './sections/List/List.tpl.html'
    }
  }
});

我的主要（抽象）状态是 app 并使用 menu.tpl.html，如下所示：

<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content class="custom-central-content">
        <ion-nav-bar class="bar-calm custom-header-bar">
            <ion-nav-buttons side="left">
                <!--<button class="button button-icon button-clear ion-home" menu-toggle="left"></button>-->
                <button class="button button-icon button-clear ion-home" ui-sref="app.myHouse" id="AppMenuLeftIcon"></button>
            </ion-nav-buttons>

            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="right" id="AppMenuRightIcon"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-view ui-view="appContent"></ion-view>

    </ion-side-menu-content>

    <ion-side-menu side="right">
        <ion-header-bar class="bar-dark">
           .....

在<ion-view ui-view="appContent"></ion-view> 内部，我使用的是来自pageViewsContainer.tpl.html 的模板，即：

<ion-view>
    <ion-content class="hg-split-page-container">
        <div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
        <ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
    </ion-content>
</ion-view>

然后在Details 和List 中打印我需要的两个视图。

问题是我需要能够为主（主页）页面设置一个静态标题，但是当我进入 Details 时使用我范围内的页面名称动态更改它。

问题是我无法以任何方式打印任何标题（纯文本，而不是范围）。

我尝试过（在 pageViewsContainer.tpl.html 中）：

<ion-view>

    <ion-nav-title>View 1</ion-nav-title>

    <ion-content class="hg-split-page-container">
        <div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
        <ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
    </ion-content>
</ion-view>

---

<ion-view view-title="View 1">

        <ion-content class="hg-split-page-container">
            <div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
            <ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
        </ion-content>
    </ion-view>

---

以及（内部详细信息模板）：

<ion-view>
    <ion-nav-title>View 1</ion-nav-title>
    <ion-content class="has-footer has-header">
     ...

---

<ion-view view-title="View 1">
        <ion-content class="has-footer has-header">
         ...

但没有任何效果。

建议？

Answer 1

尝试在标题栏中添加标题命令

<ion-view>
  <ion-header-bar class="bar-stable">
    <h1 class="title">View 1</h1>
  </ion-header-bar>
<ion-view>

或者试试

<ion-view>
  <div class="bar bar-header browse-header" align-title="center">
    <h1 class="title">View 1</h1>
 </div>
 <ion-content class="has-header">
 </ion-content>
</ion-view>

Answer 2

结果我不得不在导航上进行相当多的更改，因为我以完全错误的方式使用嵌套视图、父视图、子视图。现在工作正常。

另外，如果由于某些原因，标题导航栏仍未显示，您可以在控制器中使用它来强制它（coffeescript）：

# This should show the navabar everytime the view is entered
$scope.$on '$ionicView.enter', () ->
  $ionicNavBarDelegate.showBar true