1
我跟着本教程中實現自己的多步驟形式：http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-routerAngularJS多步窗體使用UI的路由器（帶導航鏈接）
這裏的問題是，這僅適用於如果你的網頁是唯一的表單頁面沒有別的。我目前有一個有四頁的SPA，其中一個是註冊表。
- 首頁
- 註冊
- 力學
- 條款&條件
我index.php
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home"><img src="assets/img/logo.png" alt=""></a>
</div>
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav home">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="registration">Registration</a></li>
<li><a ui-sref="mechanics">Mechanics</a></li>
<li><a ui-sref="terms-conditions">Terms & Conditions</a></li>
</ul>
</nav>
</div><!-- .container-fluid -->
<div ui-view=""></div><!-- load contents via angular views -->
</div><!-- .container -->
我使用的UI路由器通過這些頁面進行導航。這工作正常。我試圖在嵌套視圖的註冊頁面中使用ui-router，但顯然它的行爲並不像預期的那樣。我想要註冊頁面加載第一個嵌套視圖，但它不綁定它。這是我的嵌套視圖：
- 登記-profile.php（應該是默認視圖）
- 登記-artist.php（步驟2）
- 登記-share.php（最後一步）
這裏是我的stateProvider代碼混合兩種（導航和登記嵌套視圖）：
spinnrApp.config(function ($stateProvider, $urlRouterProvider) {
//
// Now set up the states
$stateProvider
.state('home', {
url: "/",
templateUrl: "app/components/home/home.php"
})
.state('registration', {
url: "/registration",
templateUrl: "app/components/registration/registration.php",
controller: "RegController"
})
.state('registration.profile', { // nested state for the registration form
url: "/profile", // url will be nested /registration/artist
templateUrl: "app/components/registration/partials/registration-profile.php"
})
.state('registration.artist', { // nested state for the registration form
url: "/artist", // url will be nested /registration/artist
templateUrl: "app/components/registration/partials/registration-artist.php"
})
.state('registration.share', { // each nested state will have their own view
url: "/share", // url will be nested /registration/share
templateUrl: "app/components/registration/partials/registration-share.php"
})
.state('mechanics', {
url: "/mechanics",
templateUrl: "app/components/mechanics/mechanics.php"
})
.state('terms-conditions', {
url: "/terms-conditions",
templateUrl: "app/components/terms/terms-conditions.php"
});
//
// For any unmatched url, redirect to/
$urlRouterProvider.otherwise("/");
});
這是REG istration.php樣子：
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
出於某種原因，「用戶界面視圖」沒有與註冊-profile.php，一旦網頁被訪問這應該是默認視圖結合。這裏似乎是什麼問題？我做錯了什麼，我不知道？我現在剛學習AngularJS，順便說一句。