角UI路由器 - 嵌套国多种布局

问题描述：

我想有多种布局，我想转出基于所需的布局不同的路线（1-COL，2-COL，3列）。

I want to have multiple layouts (1-col, 2-col, 3-col) which I want to switch out for different routes based on the layout needed.

我现在有哪些默认使用一定的布局，然后内的布局包含命名为部分用户界面视图指令，如页眉，页脚，侧边栏等等。

I currently have a root state which defaults to using a certain layout and then within that layout contains named ui-view directives for sections such as the header, footer, sidebar etc.

我只是想知道是否有可能以嵌套状态改变了布局，因为它现在不工作，控制台或棉短绒内没有错误出现。

I was just wondering if it is possible to change out the layout for nested states, as it currently does not work and no errors within the console or linter are appearing.

我目前得到浏览器没有输出这让我觉得我已经实现了的方法错了，因为所有路由都不会从路由状态继承。

I am currently getting no output in the browser at all which makes me think I have implemented the approach wrong, as all routes aren't inheriting from the route state.

这里的code：

我的-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>

鸭preciate帮助

Appreciate the help

答

虽然有显示你的例子没有plunker，我将共享一个与你：的工作布局实例。请注意它在行动，看看有什么我会尽量在这里解释

While there is no plunker showing your example, I will share one with you: working layout example. Please observe it to see in action what I will try to explain here

如果我们的根状态应该是唯一的根状态，注入 index.html的，我们确实需要一个有点不同确定指标：

If our root state should be the only root state, injected into index.html, we do need a bit different defintion:

因此，对于的index.html

So for 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'
      }
    }
  })

这是什么： '头@根 ？这是绝对的命名。点击此处查看：

What is this: 'header@root'? it is absolute naming. Check it here:

View名称 - 相对与绝对名称的（下面小编列举）的

和 href=\"http://*.com/a/24749774/1679310\">我试图expain，在细节

View Names - Relative vs. Absolute Names (small cite below)
and here I tried to expain that in detail

幕后花絮，每个视图被分配遵循的方案绝对名称 '视图名@ Statename的 ，其中视图名是名称在视图中使用的指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。

Behind the scenes, every view gets assigned an absolute name that follows a scheme of 'viewname@statename', where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

这同样适用于其他国家的定义。由于root.signup'有直接父'根'，现有的语法将工作

The same goes for other states definitions. Because the 'root.signup' has direct parent 'root', the existing syntax would be working

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

但我们可以用绝对的命名，它会工作，以及

But we could use absolute naming and it would work as well

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

，因为这是它是如何工作的背后反正。

because this is how it works behind anyway.

请，请遵守有关详细信息，布局例如

Please, observe the layout example for more details

角UI路由器 - 嵌套国多种布局

相关推荐