Question

我目前正在使用Ionic版本1.2.4。

我的父视图app是ion-side-menus指令。目前，ion-side-menu-content - ＆gt; ion-nav-bar有一个标题，但其子视图不会更改ion-nav-bar标题。

这是app来源：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable has-header" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>

        <h1 class="title">
          Default Title
        </h1>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/view1">
          View 1
        </ion-item>
        <ion-item menu-close href="#/app/view2">
          View 2
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

app状态设置如下：

$stateProvider.state('app', {
  url: '',
  abstract: true,
  template: '<app></app>'
});

子视图已正确加载到ion-nav-view，但它view-title并未更新ion-nav-bar标题。

以下是view1的来源：

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

view1状态设置如下：

$stateProvider.state('app.view1', {
  url: '/view1'
});

我对component和controller属性使用了角度templateUrl。

使用ion-nav-bar时，如何让子视图更新其父视图ion-side-menus标题？

Answer 1

经过一些修修补补后，这已经解决了......

为了完成这项工作，我修改了app所在的ion-nav-view模板源，并添加了name属性： <ion-nav-view name="appContent"></ion-nav-view>

在子视图中，我将state修改为：

$stateProvider.state('app.view1', {
  url: '/view1',
  views: {
    'appContent': {
      templateUrl: `path/to/view1.html`
    }
  }
});

在view1模板源代码中，我添加了ion-nav-title指令，如下所示：

<ion-view>
  <ion-nav-title>View 1</ion-nav-title>
  <ion-content class="padding">
    <p>View 1</p>
  </ion-content>
</ion-view>

现在子视图ion-nav-title分别更改导航栏标题。

如何将ion-sides-menus标题设置为其子离子视图标题？

1 个答案: