Angular UI Router - вложенные состояния с несколькими макетами

Я хочу иметь несколько макетов (1-col, 2-col, 3-col), которые я хочу отключить для разных маршрутов на основе необходимого макета.

В настоящее время у меня есть состояние root, которое по умолчанию использует определенный макет, а затем внутри этого макета содержит именованные директивы 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>

Оцените справку

Ответ 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'
      },
      '[email protected]': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      '[email protected]': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

Что это: '[email protected]'? это абсолютное именование. Проверьте это здесь:

Показать имена - Относительные и абсолютные имена (ниже указана небольшая ссылка)
и здесь Я попытался подробно описать это

За кулисами каждому представлению присваивается абсолютное имя, которое следует схеме '[email protected]', где viewname - это имя, используемое в директиве представления, а имя состояния - это абсолютное имя состояния, например. contact.item. Вы также можете написать имена имен в абсолютном синтаксисе.

То же самое относится к определениям других состояний. Поскольку "root.signup" имеет прямой родительский "корень", существующий синтаксис будет работать

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

Но мы могли бы использовать абсолютное именование, и оно также будет работать

.state('root.signup', {
    url: '/signup',
    views: {
      '[email protected]': { // absolute naming
      ...

потому что так оно и работает.

Пожалуйста, обратите внимание на макет для более подробной информации