Angular UI 路由器未更新布局视图

Question

我已经坚持了好几个小时了。加载 2 列布局，但不加载状态视图。所有的视图路径都是正确的，我没有收到任何错误。我用谷歌搜索了答案，但找不到任何东西。

angular.module('App', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'firebase',
    'firebase.ref',
    'firebase.auth',
    'ui.router'
  ])
    .config(['$stateProvider',
        function($stateProvider) {

            $stateProvider
                .state('root', {
                    url: '',
                    abstract: true,
                    views: {
                        'layout': {
                            templateUrl: 'views/partials/layout/1-column.html'
                        }
                    }
                }).state('root.home', {
                    url: '/',
                    views: {
                        'layout@': {
                            templateUrl: 'views/partials/layout/2-column.html'
                        },
                        'header': {
                            templateUrl: 'views/partials/layout/sections/header.html'
                        },
                        'sidebar': {
                            templateUrl: 'views/partials/layout/sections/sidebars/loginSidebar.html'
                        },
                        'main': {
                            templateUrl: 'views/partials/layout/sections/main.html'
                        },
                        'footer': {
                            templateUrl: 'views/partials/layout/sections/footer.html'
                        }
                    }
                })
    }])

这是 html 代码：

index.html

 <div class="container">
        <div ui-view="layout"></div>
  </div>

1-column.html

<div>
  layout 1
  <section class="col-md-12">
    <div ui-view="header"></div>
  </section>



    <section class="main col-md-12">
      <div ui-view="main"></div>
    </section>

    <section class="col-md-12">
    <div ui-view="footer"></div>
  </section>
</div>

2-column.html

<div>
  layout2
  <section class="col-md-12">
    <div ui-view="header"></div>
  </section>


    <section class="sidebar col-md-2">
      <div ui-view="sidebar"></div>
    </section>


    <section ngclass="main col-md-10">
      <div ui-view="main"></div>
    </section>

    <section class="col-md-12">
    <div ui-view="footer"></div>
  </section>
</div>

Answer 1

您必须在 .state('root.home'):

中添加视图的相对路径

'header' -> 'header@root.home'
'sidebar' -> 'sidebar@root.home'
'main' -> 'main@root.home'
'footer' -> 'footer@root.home'

参见文档：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

另请记住，在 'root' 状态下，您的应用程序没有关于 'footer' 和 'header' 等子视图的信息。在 'root.home' 状态下它确实如此，但是来自 'root' 状态的 'layout' 视图将被来自 'root.home' 状态的同名视图覆盖。所以无论如何，用你目前的方法你不会得到 2 列布局:)

P.S。同样在你的情况下，你应该做一个有 2 个视图的状态 - 一个用于第一列，一个用于第二列。

Angular UI 路由器未更新布局视图

Angular UI Router is not updating the layout view

angularjs

angular-ui

angular-ui-router