猿问

角UI路由器-具有多个布局的嵌套状态

角UI路由器-具有多个布局的嵌套状态

我想有多个布局(1，2，3)，我想切换到不同的路线，根据需要的布局。

我目前有一个根状态，默认使用某个布局，然后在该布局中包含针对页眉、页脚、侧边栏等部分的命名UI视图指令。

我只是想知道是否有可能更改嵌套状态的布局，因为它目前无法工作，控制台或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 -->

感谢你的帮助


ABOUTYOU
浏览 439回答 1
1回答

蛊毒传说

虽然没有柱塞显示你的例子，但我将与你分享一个：工作布局实例..请观察它，看看我在这里要解释的是什么。如果我们root状态应该是唯一的根状态，注入到index.html，我们确实需要一些不同的定义：所以对于index.html//&nbsp;index.html<body> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;ui-view="layout"> &nbsp;&nbsp;&nbsp;&nbsp;</div></body>我们需要这样的语法：$stateProvider&nbsp;&nbsp;.state('root',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'', &nbsp;&nbsp;&nbsp;&nbsp;views:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'layout':&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;'partials/layout/1-column.html' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'header@root':&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;'partials/layout/sections/header.html' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'footer@root':&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;'partials/layout/sections/footer.html' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;})这是什么？'header@root'？这是绝对的命名。在这里检查一下：视图名称-相对名称与绝对名称&nbsp;(下面是小引文)和这里我试着详细说明在幕后，每个视图都分配了一个绝对名称，该名称遵循'viewname@statename'，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.tem。您还可以选择用绝对语法编写视图名称。其他州的定义也是如此。因为‘root.signup’有直接的父级‘root’，现有的语法将正常工作。.state('root.signup',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/signup', &nbsp;&nbsp;&nbsp;&nbsp;views:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'step-breadcrumb':&nbsp;{&nbsp;//&nbsp;working&nbsp;AS&nbsp;IS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...但是我们可以使用绝对命名，而且它也能工作。.state('root.signup',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/signup', &nbsp;&nbsp;&nbsp;&nbsp;views:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'step-breadcrumb@root':&nbsp;{&nbsp;//&nbsp;absolute&nbsp;naming &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...因为这就是它背后的工作原理。请注意布局有关更多细节的示例
0
随时随地看视频慕课网APP

相关分类

AngularJS
我要回答