Angular UI路由器 - 具有多种布局的嵌套状态

我想根据所需的布局为不同的路由切换出多个布局（1-col，2-col，3-col）。Angular UI路由器 - 具有多种布局的嵌套状态

我现在有缺省为使用特定的布局，然后该布局内包含命名为区段UI视图指令，如页眉，页脚，边栏等

我只是想知道如果它根状态可以更改嵌套状态的布局，因为它目前不起作用，并且控制台或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>

欣赏的帮助

来源

2014-09-04 PI.

虽然没有显示你的例子没有plunker，我将分享一个你：working layout example。请注意在行动上，看看有什么我会尽量在这里解释

如果我们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]'？这是绝对的命名。点击此处查看：

View Names - Relative vs. Absolute Names（小举以下）
和here我试图expain在详细

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

对于其他状态定义也是如此。因为'根。注册”有直接父‘根’，现有的语法将工作

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

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

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

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

请注意，请注意layout示例以获取更多详细信息

来源

2014-09-05 04:57:17

感谢Radim。关于不在Plunkr中提供示例的道歉。 – 2014-09-05 12:39:17

很高兴，如果这有帮助！如果我发送给朋友的帮助......那么很棒;）享受ui-router，先生;） – 2014-09-05 12:39:56

非常感谢。再加上另一个答案，我能够创建一个完美的解决方案，具有路线的公共和私人布局。查看我的解决方案：http://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state/32196068#32196068 – Mattijs 2015-08-25 05:23:05

Angular UI路由器 - 具有多种布局的嵌套状态

回答

相关问题