angular 嵌套视图不起作用

Question

我想开发一个电子邮件客户端应用程序，用户首先会看到一个登录面板，然后会被重定向到主视图，里面几乎没有其他视图。就像收到的电子邮件、已删除的邮件、垃圾邮件等。为此，我使用了 ui-router 和嵌套视图，我的配置代码如下所示：

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' 

     }) });

但是它没有在我的电子邮件面板上显示所有嵌套视图，而是将我送回登录视图。所有的路径都是正确的。

Answer 1

也许这就是问题所在？你需要这个吗？

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

另外我假设你是这样链接的..

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

Answer 2

确保在 main 状态下使用的模板有一个无名的 ui-view。类似于：

<div ui-view></div>

至少有 1 个 ui-view 在父状态中需要ui红色，因为它的子状态需要填充（除非你使用一些非常高级的配置）

更新

使用 ui-router 时，请使用 $state 而不是 $location。 $state 是用于在各州之间导航的服务，可以与各州名称一起使用。

在你的 loginCtrl 中尝试为 $state.go('main') 更改 $location.path（记得在控制器的参数中包含对 $state 的依赖）

此外，在 HTML 中创建链接时，请按照 Judson Terrell 的建议使用 ui-sref="state_name"。

通常，当 ui-路由器重定向到默认 URL 时，这是因为它找不到所提供的 URL 的状态。使用这种方法，您可以确保提供给浏览器的 URL 与为您的状态配置的相同。

如果这不起作用，请尝试注释 $urlRouterProvider.otherwise 行以避免重定向。

angular 嵌套视图不起作用

angular nested views not working

javascript

frontend

angularjs

angular-ui-router