角度嵌套視圖不能正常工作

我想要構建一個電子郵件客戶端應用程序，其中用戶首先會看到一個登錄面板，然後將其重定向到其他視圖內的主視圖。像收到的電子郵件，刪除，垃圾郵件等。要做到這一點我使用的UI路由器和嵌套的意見和我的配置代碼如下所示：角度嵌套視圖不能正常工作

app.config(function($stateProvider, $urlRouterProvider){ 
$urlRouterProvider.otherwise('/login'); 

$stateProvider 
.state('/',{ 
    url: '/login', 
    templateUrl: 'views/login.html', 
    controller: 'loginCTRL' 
}) 
.state('main',{ 
    url: '/main', 
    templateUrl: 'views/mainView.html', 
    controller: 'MailCtrl' 

}), 
.state('main.received', { 
    url: '/received', 
    templateUrl: '/views/received.html' , 
    controller: 'receivedCTRL' 
    }) 

    }) 
.state('main.spam', { 
    url: '/spam', 
    templateUrl: '/views/spam.html', 
    controller: 'spamCTRL' 

    }) 
.state('main.removed', { 
    url: '/removed', 
    templateUrl: '/views/removed.html', 
    controller: 'removedCTRL' 

    }) 
.state('main.message', { 
    url: '/message', 
    templateUrl: '/views/FullMessage.html', 
    controller: 'MailCtrl' 

    }) });

但不是我的電子郵件面板上顯示所有的嵌套的意見發送我回到登錄視圖。所有的路徑都是正確的。

來源

2016-08-18 A.New

你能否提供'views/mainView.html'的內容？ –

https://jsfiddle.net/g6j7e6yp/ <---這裏是。 ui-view部分位於代碼的最底部。 –

你的狀態配置有一些錯別字：'main.received'和'main.message'關閉兩次，狀態'main'後面有一個逗號。請讓我知道，如果這也存在於您的代碼或只是在這裏。 –

確保在main狀態下使用的模板有一個無名ui-view。喜歡的東西：

<div ui-view></div>

至少1 UI的觀點是在父母的狀態需要它的孩子來填充（除非你使用一些非常高級的配置）

UPDATE

當使用用戶界面 - 路由器，請使用$state而不是$location。 $state是用於在狀態之間導航的服務，可以與狀態的名稱一起使用。

在你loginCtrl嘗試改變$location.path爲$state.go('main')（請記住，包括在控制器的參數$state的依賴）

此外，在HTML創建鏈接時，使用ui-sref="state_name"作爲賈德森特雷爾建議。

通常當UI路由器重定向到默認的URL這是因爲它無法找到提供的URL的狀態。通過這種方法，您可以確保提供給瀏覽器的URL與爲您的狀態配置的URL相同。

如果這不工作，也儘量徵求意見的$urlRouterProvider.otherwise線，以避免重定向。

來源

2016-08-18 03:41:30

另外，我不確定是否'/'是一個有效的州名...我會改變它以防萬一 –

也許這是問題？你需要這個嗎？

$stateProvider 
    .state("otherwise", { url : '/login'})

我也假設你正在鏈接這樣的..

<a ui-sref="mystate">Go To My State</a>

來源

2016-08-18 03:31:48

角度嵌套視圖不能正常工作

回答

相關問題