角度嵌套视图不起作用

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视图才能填充其子状态（除非您使用某些真正高级的配置）

更新

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

在您的loginCtrl尝试将$location.path更改为$state.go('main') （请记住在控制器的参数中包括对$state的依赖性）

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

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

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