在 Ionic 中添加的视图显示为纯白色

Question

我想在我的 Ionic-App 中添加一个登录屏幕。但不知何故，当 urlRouterProvider 指向指定路径时，应用程序就会变白。目前它看起来像这样：

login.html（模板）

<ion-view view-title="login">
  <ion-content class="padding">
    <label class="item item-input">
      <span class="input-label">Username</span>
      <input type="text">
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password">
    </label>
  </ion-content>
</ion-view>

相当简单，只需输入字段即可。

app.js 包含以下内容：

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

    .state('dash.login', {
      url: '/login',
      views: {
        'login': {
          templateUrl: 'templates/login.html',
          controller: 'LoginCtrl'
        }
      }
    })

  $urlRouterProvider.otherwise('/tab/dash/login');

是的，dash 视图应该是登录的父视图。 控制器存在，但目前没有功能：

.controller('LoginCtrl', function($scope) {})

我是新手，但根据大多数在线文档，这应该已经可以了！我添加了一个新视图，根据它创建了状态，然后将 urlRouterProvider 指向它，这是因为应用程序的开始屏幕目前是纯白色的，顶部是导航栏，添加了空控制器，就是这样。

还没有服务，我没有更改 index.html。该应用程序是一个基于 Tab 的 Ionic 模板，其 tabs.html 如下所示：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->
  <ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Kalender Tab -->
  <ion-tab title="Kalender" icon-off="ion-calendar" icon-on="ion-calendar" href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  <!-- Fangbuch Tab -->
  <ion-tab title="Fangbuch" icon-off="ion-folder" icon-on="ion-folder" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>

我在这里错过了什么？

Answer 1

您需要添加一个与您的登录屏幕对应的视图。在您的 index.html 中，您看到 <ion-nav-view name="tab-dash"></ion-nav-view> 的位置了吗？请注意，该视图的名称与您的 ui-router 状态中的视图名称相对应：

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

话虽如此，这是我发现的一支笔，可以帮助您朝着正确的方向前进 - https://codepen.io/ionic/pen/CbBsA