如何加載嵌套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視圖模板？

回答

相關問題