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'

请参阅doc：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

另请注意，在状态“root”中，您的应用程序没有关于子视图的信息，如“页脚”和“标题”。在'root.home'状态下它会这样做，但是来自'root'状态的'layout'视图将被来自'root.home'状态的同名视图覆盖。所以无论如何，使用您当前的方法，您将无法获得2列布局：）

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

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

1 个答案: