Ionic ion-view 中缺少标题

Question

由于某种原因，我无法显示 Ionic 标题：http://codepen.io/hawkphil/pen/oXqgrZ?editors=101

这段代码并不完全是 100% 遵循 Ionic 示例，但我不想添加 2 层状态（/ 和 /somethingelse）只是为了做一个简单的页面，包括顶部和底部。

HTML

  <ion-nav-bar class="bar-balanced">
    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-buttons side="right">
      <button class="button button-clear">
        OK
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-view view-title="{{ title }}">
    <ion-content class=" has-header">
      test test
      </<ion-content>
  </ion-view>

JS

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  $scope.title = '<b>BOLD TITLE</b>';
});

有没有办法解决这个问题？我需要一种用 HTML 显示动态标题的方法。

Answer 1

您的<ion-view> 应该在<ion-nav-view> 中，它是ui-router 的一部分，如docs 中所述。您必须为要更新的动态标头设置一些基本路由。

我已经定制了你的 codepen here

Answer 2

因为你想直接显示视图，独立于ui-router的路由，那么它应该是ion-nav-view而不是ion-nav&然后用于更改nav标头ion-header-bar，&然后用于绑定HTML离子标题，您可以使用@shushanthp 建议的答案。

代码

<ion-nav-view view-title="{{ title }}">
  <ion-header-bar align-title="left" class="bar-balanced bar">
    <span ng-bind-html="title"></span>
  </ion-header-bar>
  <ion-content class=" has-header">
    test test
  </<ion-content>
</ion-nav-view>

Forked Codepen