角度嵌套视图不起作用答案

【问题标题】：angular nested views not working角度嵌套视图不起作用
【发布时间】：2016-08-18 03:20:34
【问题描述】：

我想构建一个电子邮件客户端应用程序，用户首先会看到一个登录面板，然后将被重定向到主视图，其中很少有其他视图。像收到的电子邮件，删除，垃圾邮件等。为此，我使用了 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' 

     }) });

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

【问题讨论】：

能否提供views/mainView.html的内容？
jsfiddle.net/g6j7e6yp
您的状态配置中有一些拼写错误：main.received 和 main.message 关闭了两次，状态 main 后面有一个逗号。请让我知道这是否也存在于您的代码中或只是在这里。
无意中这是我在这里复制代码时的错误。我的原始代码中没有双右括号。我的 JS 控制台没有向我发送任何错误语法消息
您是否按照下面 Judson Terrell 的建议使用 ui-sref？或在 javascript $state.go('state_name_here')?

标签： javascript angularjs angular-ui-router frontend

【解决方案1】：

确保main 状态下使用的模板有一个无名的ui-view。比如：

<div ui-view></div>

在父状态中至少需要 1 个 ui-view 才能填充它的子状态（除非您使用一些非常高级的配置）

更新

使用 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 行以避免重定向。

【讨论】：

另外，我不确定/ 是否是一个有效的州名...我会将其更改为其他名称以防万一

【解决方案2】：

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

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

我也假设你是这样链接的..

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

【讨论】：