另一个 ui-view 中的 Angular ui-view答案

【问题标题】：Angular ui-view inside another ui-view另一个 ui-view 中的 Angular ui-view
【发布时间】：2016-04-23 09:32:34
【问题描述】：

目前正在开发一个我正在使用 AngularJS UI 路由的应用程序。在互联网上为我的问题搜索了几个小时后，我仍然无法理解我的问题将如何得到解决。这是我正在使用的代码。如果有人可以帮助解决这个问题。那我真的很感激。

我只是想知道代码如何定义 ui-view="sidebar" 的状态，就像我在我的 defaultLayout 状态中为页眉和页脚定义的一样。尝试了一些东西，但没有工作。有什么想法请分享。

HTML：

//====index.html=====//
<body ui-view="layout"></body>

//========default.html (nested view inside layout)=============//
<header ui-view="header"></header>
<div class="wrap">
    <div id="container">
        <div ui-view="alert"></div>
        <div ui-view></div>
    </div>
</div>
<footer ui-view="footer"></footer>


//=======products.html (another nested view inside empty ui-view in default.html file)========//
<div class="row"><div ui-view="sidebar"></div></div>

JS代码：

//=====states I have defined in my route files are=====//
$stateProvider.
        state('defaultLayout', {
            abstract: true,
            views: {
                'layout': {
                    templateUrl: 'views/layouts/default.html'
                },
                'header@defaultLayout': {
                    templateUrl: 'views/elements/header.html',
                    controller: 'HeaderCtrl'
                },
                'footer@defaultLayout': {
                    templateUrl: 'views/elements/footer.html',
                    controller: 'FooterCtrl'
                },
                'sidebar@defaultLayout': {
                    templateUrl: 'views/elements/sidebar.html',
                    controller: 'SidebarCtrl'
                },
                'alert@defaultLayout': {
                    templateUrl: 'views/layouts/alert.html',
                    controller: 'AlertCtrl'
                }
            }
        })
        .state('home', {
            url: '/',
            templateUrl: 'views/pages/home.html',
            controller: 'HomeCtrl',
            parent: 'defaultLayout'
        })
        .state('checkout', {
            url: '/pages/checkout',
            templateUrl: 'views/pages/checkout.html',
            controller: 'HomeCtrl',
            parent: 'defaultLayout'
        });

【问题讨论】：

被卡在这里很严重。谁能帮忙！！！
我遇到了类似的问题，this answer 帮我解决了。

标签： javascript angularjs angular-ui-router angular-ui web-frontend

【解决方案1】：

点符号

您可以使用点语法来推断 $stateProvider 的层次结构。下面，contacts.list 成为联系人的子项。

$stateProvider
  .state('contacts', {})
  .state('contacts.list', {});

【讨论】：

感谢您的 cmets。我尝试过相同的方法，但不知何故它不起作用。如果您有任何示例代码，您能否分享任何示例代码，我可以从中获取参考。或者如果可以的话，你能帮我分享上面更新的代码吗？再次感谢。