angular ui-view嵌套路由视图不显示

Question

[图片]
嵌套路由 写了state 访问list或者edit都被重定向到main 为什么啊？？？ 新手上路 就问一个问题
main的view里面再嵌套一个ui-view 加载list或者edit
为什么访问list或者edit的url重定向到main 还不现实两个子view的内容

Answer 1

可以看看你的子路由跳转的的链接是如何写的？是按照下面的方式写的吗？

<a ui-sref="main.list">....</a>

Answer 2

你的state有“.”号，可以认为有嵌套，所以你的路由配置应该如下

$stateProvider
        .state('index', {
            abstract: true,//注意
            url: "/index",
            templateUrl: "views/common/content.html"
        })
        .state('index.main', {
            url: "/main",
            templateUrl: "views/main.html",
            data: {pageTitle: '主页'}
        })
        .state('index.manager', {
            url: "/manager",
            templateUrl: "views/manager/index.html",
            controller: 'manager.ctrl',
            data: {pageTitle: '控制台'}
        })
        .state('index.article', {
            url: "/article",
            templateUrl: "views/article/index.html",
            controller: 'article.ctrl',
            data: {pageTitle: '文章管理'}
        });

HTML

<!-- Wrapper-->
<div id="wrapper">

    <!-- Navigation -->
    <div ng-include="'views/common/navigation.html'"></div>

    <!-- Page wraper -->
    <!-- ng-class with current state name give you the ability to extended customization your view -->
    <div id="page-wrapper" class="gray-bg {{$state.current.name}}" style="padding-bottom: 40px;background: white;">

        <!-- Main view  -->
        <div ui-view></div>

    </div>
    <!-- End page wrapper-->

</div>
<!-- End wrapper-->

Answer 3

会跳转到main节点是因为你当前的state未找到。而main就被设置为默认路径的原因。

$urlRouterProvider.otherwise("/main")

官方示例

在上面的示例中是嵌套视图的应用，楼主可以参考一下。