1. 首页
  2. 问题
  3. Angular UI Router-具有多种布局的嵌套状态
小编典典

Angular UI Router-具有多种布局的嵌套状态

angularjs

我想有多个布局（1-col，2-col，3-col），我想根据所需的布局切换到不同的路线。

我目前有一个根状态，默认情况下使用某种布局，然后在该布局中包含用于标题（如页眉，页脚，边栏等）的ui-view指令。

我只是想知道是否有可能更改嵌套状态的布局，因为它目前不起作用，并且控制台或linter中没有出现错误。

我目前在浏览器中完全没有输出，这使我认为我实现了错误的方法，因为所有路由都没有从路由状态继承。

这是代码：

My-module.js

'use strict';

angular.module('my-module', ['ngResource', 'ui.router'])
  // Routing for the app.
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('root', {
        url: '',
        views: {
          'layout': {
            templateUrl: 'partials/layout/1-column.html'
          },
          'header': {
            templateUrl: 'partials/layout/sections/header.html'
          },
          'footer': {
            templateUrl: 'partials/layout/sections/footer.html'
          }
        }
      })
      .state('root.home', {
        url: '/'
      })
      .state('root.signup', {
        url: '/signup',
        views: {
          'step-breadcrumb': {
            templateUrl: 'partials/signup/step-breadcrumb.html'
          }
        }
      })
      ;

    $urlRouterProvider.otherwise('/');
  })
  ;

Index.html

<!doctype html>
<html class="no-js" ng-app="my-module">
  <head>
    <meta charset="utf-8">
    <title>My Test App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/modernizr.js -->
    <script src="bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
  </head>
  <body>

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

    <!-- build:js({app,.tmp}) scripts/vendor.js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- endbuild -->

    <script src="scripts/config.js"></script>

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/my-module.js"></script>
    <!-- inject:partials -->
    <!-- endinject -->
    <!-- endbuild -->

  </body>
</html>

1-column.html

<div class="one-column">

  <!-- page header -->
  <div ui-view="header">
  </div>
  <!-- / page header -->

  <!-- state breadcrumb (optional) -->
  <div ui-view="step-breadcrumb">
  </div>
  <!-- / state breadcrumb -->

  <!-- page-container -->
  <div class="page-container">

    <!-- main content -->
    <div ui-view="main-content">
    </div>
    <!-- / main content -->

  </div>
  <!-- / page-container -->

  <!-- page footer -->
  <div ui-view="footer">
  </div>
  <!-- / page footer -->

</div>

感谢帮助


阅读 252

收藏
2020-07-04

共1个答案

小编典典

虽然没有显示您的示例的小插曲，但我将与您分享一个示例：有效的布局示例。请观察它，以了解我将在此处尝试解释的内容

如果我们的root状态应该是注入到中的唯一根状态index.html，那么我们确实需要一些不同的定义：

所以对于index.html

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

我们将需要以下语法：

$stateProvider
  .state('root', {
    url: '',
    views: {
      'layout': {
        templateUrl: 'partials/layout/1-column.html'
      },
      'header@root': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      'footer@root': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

这是 'header@root' 什么 这是绝对的命名。在这里检查：

在幕后，每个视图都被分配一个遵循方案的绝对名称 'viewname@statename'
，其中viewname是view指令中使用的名称，状态名称是该状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

其他状态定义也是如此。因为’root.signup’具有直接父级’root’，所以现有语法可以正常工作

.state('root.signup', {
    url: '/signup',
    views: {
      'step-breadcrumb': { // working AS IS
      ...

但是我们可以使用绝对命名，它也可以正常工作

.state('root.signup', {
    url: '/signup',
    views: {
      'step-breadcrumb@root': { // absolute naming
      ...

因为无论如何这就是它的工作原理。

请查看布局示例以了解更多详细信息

2020-07-04