如何在 ionic 中使用 ui-view答案

【问题标题】：how to work with ui-view in ionic如何在 ionic 中使用 ui-view
【发布时间】：2015-07-01 23:58:55
【问题描述】：

我正在使用 ionic 构建一个混合应用程序，但我无法让 ui-view 动态显示内容

这是索引

<body ng-app="starter">
 <ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-nav-view></ion-nav-view>
</ion-pane>
</body>

根据我的理解，ion-nav-view 的工作方式与 angular ui-routing 中的 ui-view 一样。

这是我的 app.js

.config(function($stateProvider, $urlRouterProvider){

$stateProvider

.state('login',{
    url: '/',
    template: '<h1>hello</h1>'
})

$urlRouterProvider.otherwise('/');

})

我希望在转到应用程序的根目录时显示 hello 这个词，但它不起作用。它没有显示任何内容，也没有给出任何控制台错误。

【问题讨论】：

标签： html angularjs ionic

【解决方案1】：

我怀疑“你好”在那里，但它被<ion-header-bar> 遮住了。尝试将“has-header”作为一个类添加到<ion-nav-view> 元素。该类强制内容开始时比平时低 44px，以考虑标题栏。

这是一个有效的CodePen。我所做的只是添加那个类。

【讨论】：