在离子离子视图中缺少标题

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