角度嵌套视图不能正常工作

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

角度嵌套视图不能正常工作

回答

相关问题