Question

我按照本教程实现了我自己的多步骤表单：http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router

这里的问题是，只有当您的页面只是表单页面而没有其他内容时才有效。我目前有一个有四页的SPA，其中一个是注册表。

主页
注册
力学
条款＆amp;条件

我的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-router来浏览这些页面。这没关系。我尝试在注册页面中使用ui-router和嵌套视图，但显然它没有按预期运行。我希望注册页面加载第一个嵌套视图，但它不与它绑定。以下是我的嵌套视图：

registration-profile.php（应该是默认视图）
registration-artist.php（第2步）
registration-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("/");
});

这就是registration.php的样子：

<form id="signup-form" ng-submit="processForm()">
  <!-- our nested state views will be injected here -->
  <div id="form-views" ui-view></div>
</form>

出于某种原因，'ui-view'不与registration-profile.php绑定，后者应该是访问页面后的默认视图。这里似乎有什么问题？我做错了什么我不知道吗？我目前正在学习AngularJS，顺便说一句。

Answer 1

ScotchDesign提供了一段代码所基于的代码，http://plnkr.co/edit/M03tYgtfqNH09U4x5pHC?p=preview

$urlRouterProvider.otherwise('/form/registration');

此外，默认视图是使用＆＃39; /＆＃39;设置的视图，即＆＃39; home＆＃39;如果您想要注册＆＃39;视图是第一个，然后你可以：改变＆＃39; home＆＃39;拥有网址＆＃39; / home＆＃39;，并拥有＆＃39; stateEngine＆＃39;服务电话$ state.go基于某些标准，或将注册的网址设置为＆＃39; /＆＃39;。

使用UI路由器的AngularJS多步表单（带导航链接）

1 个答案: