在離子離子視圖中缺少標題

Question

出於某種原因，我無法獲得Ionic標題： http ： //codepen.io/hawkphil/pen/oXqgrZ？edit = 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的一部分，如文檔中所述。 您必須為要更新的動態標頭設置一些基本路由。

我在這里定制了你的codepen

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>

分叉Codepen