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-router时，请使用$state代替$location。 $state是用于在州之间导航的服务，可以用于状态＆＃39;名。

在loginCtrl尝试更改$location.path $state.go('main')（请记住在控制器的参数中包含$state的依赖关系）

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

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

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

角度嵌套视图无效

2 个答案: