Ionic中的Added View显示为纯白色

Added View in Ionic shows up plain white

本文关键字:纯白 白色 显示 View 中的 Added Ionic      更新时间:2023-09-26

我想在我的Ionic应用程序中添加一个登录屏幕。但不知何故,当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>

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

apps包含以下内容:

  .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');

是的,短划线视图应该是登录名的父级。控制器存在,但目前没有功能:

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

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

还没有服务,我没有更改index.html。该应用程序是Ionic的一个基于Tab的模板,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>

我在这里错过了什么?

您需要添加一个与登录屏幕相对应的视图。在你的index.html中,你看到哪里写着<ion-nav-view name="tab-dash"></ion-nav-view>吗?注意,该视图的名称与ui路由器状态中的视图名称相对应:

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

话虽如此,我发现了一支钢笔,它应该能帮助你朝着正确的方向前进——https://codepen.io/ionic/pen/CbBsA