在离子中添加视图显示纯白色

Question

我想为我的离子应用添加登录屏幕。但不知何故，当urlRouterProvider指向指定的路径时，App只会变白。目前，它看起来像这样：

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 containts这样的：

.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。该应用程序是一个基于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路由器状态：

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

有了这样说，这里有笔，我发现应该可以帮助您在正确的方向 - https://codepen.io/ionic/pen/CbBsA