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

发布时间：2020-12-17 07:33:31 所属栏目：安全来源：网络整理

导读：我想要有多个布局(1-col,2-col,3-col),我想根据所需的布局为不同的路由切换. 我目前有一个根状态,默认使用某个布局,然后在该布局中包含用于诸如页眉,页脚,边栏等部分的命名的ui-view伪指令. 我只是想知道是否可以更改嵌套状态的布局,因为它目前不起作用,控制

我想要有多个布局(1-col,2-col,3-col),我想根据所需的布局为不同的路由切换.

我目前有一个根状态,默认使用某个布局,然后在该布局中包含用于诸如页眉,页脚,边栏等部分的命名的ui-view伪指令.

我只是想知道是否可以更改嵌套状态的布局,因为它目前不起作用,控制台或linter中没有出现任何错误.

我目前在浏览器中没有任何输出,这使得我认为我已经实施了错误的方法,因为所有路由都不会从路由状态继承.

以下是代码：

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

欣赏帮助

虽然没有你的榜样,我会和你分享一下： working layout example.请观察它,看看我会尝试在这里解释一下

如果我们的根状态应该是唯一的根状态,注入到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’？它是绝对的命名.在这里检查：

> View Names – Relative vs. Absolute Names(以下小图)
>和here我试图详细说明

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’具有直接的父’root’,现有的语法将会起作用

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

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

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

因为这是它的工作原理.

请观察layout的例子了解更多细节

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!