在離子中添加視圖顯示純白色

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