Question

目前正在使用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'
        });

Answer 1

点符号

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

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

另一个ui-view

1 个答案: