如何加载嵌套3种状态的UI路由器UI视图模板？

我试图在我的应用程序中设计几个级别的路由和嵌套视图，以便根据路线替换部分应用程序。我能够加载登录页面，并且似乎也加载了布局视图，但是，我似乎无法使嵌套的<ui-view />标记正常工作。有人可以告诉我我是如何做错的，或者如果在Angular中有一种更习惯的方式来完成相同的功能。如何加载嵌套3种状态的UI路由器UI视图模板？

app.js

(function() { 
    'use strict'; 



angular 
    .module('webApp', [ 
     'ui.router', 
    ]) 
    .config(config) 
    .run(run); 

    config.$inject = ['$stateProvider', '$urlRouterProvider']; 

    function config($stateProvider, $urlRouterProvider, ngClipProvider) { 

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
     .state('app', { 
     abstract: true, 
     url: '/', 
     template: '<ui-view/>' 
     }) 
     .state('app.login', { 
     templateUrl: 'views/login.html', 
     controller: 'LoginCtrl as login', 
     url: '' 
     }) 
     .state('app.main', { 
     url: 'room', 
     templateUrl: 'views/layout.html' 
     }) 
     .state('app.main.foo', { 
     url: '', 
     views: { 
      '[email protected]': { 
      templateUrl: 'partials/header.html', 
      controller: 'HeaderCtrl as header' 
      }, 
      '[email protected]': { 
      templateUrl: 'partials/sidebar.html', 
      controller: 'SidebarCtrl as sidebar' 
      }, 
      '[email protected]': { 
      templateUrl: 'partials/main.html', 
      controller: 'MainCtrl as main' 
      }, 
      'subHeader': { 
      templateUrl: '<div><div ui-view="bottomHeader"></div></div>', 
      controller: 'SubHeaderCtrl', 
      controllerAs: 'subHeader' 
      }, 
      'subSidebar': { 
      templateUrl: '<div><div ui-view="bottomSidebar"></div></div>', 
      controller: 'SubSidebarCtrl', 
      controllerAs: 'subSidebar' 
      }, 
      'bottomHeader': {templateUrl: '<div>FOO</div>'}, 
      'bottomSidebar': {templateUrl: '<div>BAR</div>'} 
     }, 
     resolve: { 
      isAuthenticated: ['Auth', function(Auth) { 
      return Auth.isAuthenticated(); 
      }] 
     } 
     }) 
     .state('app.main.foo.bar', { 
     url: '/:id', 
     views: { 
      '[email protected]': { 
      templateUrl: 'partials/main.html' 
      }, 
      '[email protected]': { 
      templateUrl: 'partials/main-one.html', 
      controller: 'MainOneCtrl as mainOne' 
      }, 
      '[email protected]': { 
      templateUrl: 'partials/main-two.html', 
      controller: 'MainTwoCtrl as mainTwo' 
      }, 
      '[email protected]': { 
      templateUrl: 'partials/main-three.html', 
      controller: 'MainThreeCtrl as mainThree' 
      } 
     } 
     }); 
    } 

    run.$inject = ['Auth']; 

    function run(Auth) { 
    Auth.stateChangeError(); 
    Auth.loginSuccess(); 
    Auth.loginFailure(); 
    Auth.checkSession(); 
    } 

}());

的index.html

<!DOCTYPE html> 

<html lang="en" ng-app="webApp"> 
    <head> 
    <title>FooBar</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="css/main.css" /> 
    <script src="/js/all.js"></script> 
    </head> 

    <body ui-view> 
    </body> 

</html>

的layout.html

<div ui-view="header"></div> 

<div class="app"> 
<div class="getting-started"> 
</div> 

<div ui-view="sidebar"></div> 

<div ui-view="main"></div> 
</div>

了header.html

<header class="header"> 
    <div ui-view="subHeader"></div> 

    <div class="trigger-button"> 
    <button class="trigger"> 
     <i class="icon-account"></i> 
    </button> 
    </div> 
</header>

main.html中

<div> 
    <div ui-view="mainOne"></div> 
    <div ui-view="mainTwo"></div> 
    <div ui-view="mainThree"></div> 
</div>

sidebar.html

<div> 
    <div ui-view="subSidebar"></div> 
</div>

来源

2015-04-04 evkline

有a working plunker，显示您的方案

我做了一些变化，你的状态定义：

.state('app.main', { 
    url: 'room', 
    templateUrl: 'views/layout.html' 
    })

没有absulte命名，我们的目标我们的母公司

$stateProvider .state('app', { abstract: true, url: '/', template: '<ui-view/>' }) .state('app.login', { templateUrl: 'views/login.html', controller: 'LoginCtrl', controllerAs: 'login', url: '' })

我们使用controller和controllerAs语法，相对的就足够了，更可读

.state('app.main.foo', { url: '', views: { 'header': { templateUrl: 'partials/header.html', controller: 'HeaderCtrl', controllerAs: 'header', }, 'sidebar': { templateUrl: 'partials/sidebar.html', controller: 'SidebarCtrl', controllerAs: 'sidebar', }, 'main': { templateUrl: 'partials/main.html', controller: 'MainCtrl', controllerAs: 'main', } }, resolve: { isAuthenticated: ['Auth', function(Auth) { return Auth.isAuthenticated(); }] } })

主要状态是我们的父母，千万不要重新定义它

.state('app.main.foo.bar', { url: '/:id', views: { 'mainOne': { templateUrl: 'partials/main-one.html', controller: 'MainOneCtrl', controllerAs: 'mainOne', }, 'mainTwo': { templateUrl: 'partials/main-two.html', controller: 'MainTwoCtrl', controllerAs: 'mainTwo', }, 'mainThreee': { templateUrl: 'partials/main-three.html', controller: 'MainThreeCtrl', controllerAs: 'mainThree', } } });

检查它here

来源

2015-04-04 04:56:18

嘿拉迪姆，感谢这么多详细的答案，plunker，我真的很感激。我仍在努力调整我的代码以使其工作。目前，成功登录后，路由不会从'/'根路由改变，我确定我错过了一些东西，然后再试一次。我拥有这些嵌套视图的原因是因为我希望在路由更改时创建/销毁嵌套在/：id级别的控制器以刷新给定路由的数据。你认为这是习惯用法吗？ – evkline 2015-04-04 06:03:30

Radim，如果一个UI视图嵌套在主要的。＃html部分中的一个中，它将如何从app.main.foo状态访问？ – evkline 2015-04-04 06:15:47

据我了解... main - ＃。html是app.main.foo.bar内的视图 - 这意味着它不能从app.main.foo中访问。但它可以从'酒吧'访问。我扩展了plunker并检查超级子视图'mainThreeeSub @ app.main.foo.bar''，它是超级子** **栏**中的内容。希望能帮助到你。你可以做的最好的是玩和阅读：https://github.com/angular-ui/ui-router/blob/master/sample/app/contacts/contacts.js – 2015-04-04 06:49:16

如何加载嵌套3种状态的UI路由器UI视图模板？

回答

相关问题