Angular-UI路由器:嵌套视图不起作用

时间:2015-04-12 01:52:42

标签: javascript angularjs angular-ui-router angular-ui angular-ui-bootstrap

构建多步骤表单(“向导”)。最初是this tutorial,它工作得很好,但我现在正在尝试调整它,因此第一步嵌入在主页上,而不是一个单独的状态。无论我尝试什么,我都无法创建一个可行的ui-sref路径。我总是得到:

  

无法解决州'home'的'.where'

  

无法从州'home'

解析'wizard.where'

  

无法从州'home'

解析'wizard.where @'

...即使wizard.where@<div ui-view="wizard.where@"></div>中正常工作。什么是正确的语法?

以下是相关文件:

home.js (左边的评论完好无损,所以你可以看到我正在尝试的各种方法):

var wizard = {
  url: '/home/wizard',
  controller: 'VendorsCtrl',
  templateUrl: 'vendors/wizard.tpl.html'
};

angular.module( 'myApp.home', [
  'ui.router',
  'ui.bootstrap',
  'myApp.modal',
  'angularMoment'
])

.config(function config( $stateProvider, $urlRouterProvider ) {
  $stateProvider
    .state( 'home', {
      url: '/home',
      views: {
        "main": {
          controller: 'HomeCtrl',
          templateUrl: 'home/home.tpl.html'
        },
        "jumbotron": {
          controller: 'HomeCtrl',
          templateUrl: 'home/welcome.tpl.html'
        },
        "wizard": wizard,
        "wizard.where": {
          url: '/home/wizard/where',
          controller: 'VendorsCtrl',
          templateUrl: 'vendors/wizard-where.tpl.html',
          parent: wizard
        },
        "wizard.what": {
          url: '/home/wizard/what',
          controller: 'VendorsCtrl',
          templateUrl: 'vendors/wizard-what.tpl.html',
          parent: wizard
        },
        "wizard.when": {
          url: '/home/wizard/when',
          controller: 'VendorsCtrl',
          templateUrl: 'vendors/wizard-when.tpl.html',
          parent: wizard
        },
      },
      data: { pageTitle: 'Home' }
    })

    // route to show our basic form (/wizard)
    // .state('wizard', {
    //   url: '/wizard',
    //   views: {
    //     "main": {
    //       controller: 'VendorsCtrl',
    //       templateUrl: 'vendors/wizard.tpl.html'
    //     }
    //   },
    //   abstract: true,
    //   //data: { pageTitle: 'Vendor Search' }
    // })

    // nested states 
    // each of these sections will have their own view
    // url will be nested (/wizard/where)
    // .state('wizard.where', {
    //   url: '/where',
    //   templateUrl: 'vendors/wizard-where.tpl.html'
    // })

    // url will be /wizard/when
    // .state('wizard.when', {
    //   url: '/when',
    //   templateUrl: 'vendors/wizard-when.tpl.html'
    // })

    // url will be /wizard/vendor-types
    // .state('wizard.what', {
    //   url: '/what',
    //   templateUrl: 'vendors/wizard-what.tpl.html'
    // })
    ;

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/home/wizard/where');
})

wizard.tpl.html

<div class="jumbotron vendate-wizard" ng-controller="VendorsCtrl as vendorsCtrl">
  <header class="page-title">
    <h1>{{ pageTitle }}</h1>
    <p>Answer the following three questions to search available vendors. All answers can be changed later.</p>

    <!-- the links to our nested states using relative paths -->
    <!-- add the active class if the state matches our ui-sref -->
    <div id="status-buttons" class="text-center">
      <a ui-sref-active="active" ui-sref="wizard.where@"><span>1</span> Where</a>
      <a ui-sref-active="active" ui-sref="wizard.what@"><span>2</span> What</a>
      <a ui-sref-active="active" ui-sref="wizard.when@"><span>3</span> When</a>
    </div>
  </header>

  <!-- use ng-submit to catch the form submission and use our Angular function -->
  <form id="signup-form" ng-submit="processForm()">

    <!-- our nested state views will be injected here -->
    <div id="form-views" ui-view="wizard.where@"></div>
  </form>
</div>

wizard.where.tpl.html

<div class="form-group">
  <label class="h2" for="where">Where Is Your Wedding?</label>
  <p id="vendor-where-description">If left blank, vendors in all available locations will be shown.</p>
  <div class="input-group-lg">
    <input id="where" ng-model="formData.where" class="form-control" type="text" placeholder="Boston, MA" aria-describedby="vendor-where-description" />
  </div>
</div>

<ul class="list-inline">
  <li>
    <a ui-sref="wizard.what@" class="btn btn-block btn-primary">
      Next <span class="fa fa-arrow-right"></span>
    </a>
  </li>
</ul>

2 个答案:

答案 0 :(得分:42)

我创建了working plunker here

注意:您应该阅读有关状态嵌套和命名视图的更多信息。因为当前的状态和视图定义完全错误。

首先,我们不应该将 ONE 状态定义与许多 views: {} 一起使用。但我们应该把它们分成现实状态。层次结构将具有三个级别

第一级 - 超级根状态

.state( 'home', {
  url: '/home',
  views: {
    "main": {
      controller: 'HomeCtrl',
      templateUrl: 'home/home.tpl.html'
    },
  }
})

第二级 - wizzard,检查现在我们是否更改了网址。我们将从父(home)继承其第一部分

.state("wizard", {
  parent: 'home',
  //url: '/home/wizard',
  url: '/wizard',
  controller: 'VendorsCtrl',
  templateUrl: 'vendors/wizard.tpl.html'
})

第三级 - 所有where,what,when现在还将继承url。他们不必定义父,因为它是他们名字的一部分

.state( "wizard.where",  {
      //url: '/home/wizard/where',
      url: '/where',
      controller: 'VendorsCtrl',
      templateUrl: 'vendors/wizard-where.tpl.html',
      //parent: wizard
})
.state( "wizard.what",  {
      //url: '/home/wizard/what',
      url: '/what',
      controller: 'VendorsCtrl',
      templateUrl: 'vendors/wizard-what.tpl.html',
      //parent: wizard
})
.state( "wizard.when",  {
      //url: '/home/wizard/when',
      url: '/when',
      controller: 'VendorsCtrl',
      templateUrl: 'vendors/wizard-when.tpl.html',
      //parent: wizard
})

wizzard 现在必须包含未命名的视图目标 ui-view=""

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

目前 wizard.tpl.html 包含以下内容:

<!-- our nested state views will be injected here -->
<div id="form-views" ui-view="wizard.where@"></div>

应该避免使用符号 @ ,因为它可以用于绝对视图命名 - 但是在状态定义内部。那么,可行的是 ui-view="someName

<!-- our nested state views will be injected here -->
<div id="form-views" ui-view="someName"></div>

现在,这些是 home.tpl

的{in example here)视图内容
<div>
  <h1>HOME</h1>

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

wizzard.tpl

<div>
  <h2>WIZZARD</h2>

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

因此,我们在主页向导状态中有未命名的视图目标,这非常方便,因为我们可以使用灯光状态定义,而不需要 { {1}} 对象。如果我们没有多视图,那总是首选。

这意味着,这个状态定义将正确地注入到上面的模板中:

views : {}

检查文档:

View Names - Relative vs. Absolute Names

  

在幕后,为每个视图分配一个遵循 // no views - search in parent for a ui-view="" ... .state( "wizard.when", { url: '/when', controller: 'VendorsCtrl', templateUrl: 'vendors/wizard-when.tpl.html', }) ... 方案的绝对名称,其中viewname是视图指令中使用的名称,州名是州的绝对名称,例如contact.item。您还可以选择以绝对语法编写视图名称。

     

例如,前面的例子也可以写成:

viewname@statename
  

请注意,视图名称现在指定为绝对名称,而不是相对名称。它定位于根未命名模板中的“过滤器”,“tabledata”和“图表”视图。由于它没有命名,因此'@'后面没有任何内容。根未命名的模板是您的index.html。

从州调用州

我们想要在状态导航到何时,我们可以使用directiv .state('report',{ views: { 'filters@': { }, 'tabledata@': { }, 'graph@': { } } }) ,但它必须包含州名,而不是视图命名约定

ui-sref

原因是,在这个三级层次结构中,我们只使用父名和子名(不是祖父'home'),隐藏在状态定义中。因为我们使用了这个:

// instead of this
<a ui-sref="wizard.what@"
we need this
<a ui-sref="wizard.what"

父只是父母,不是州名的一部分。在像这样的场景中哪个好(我们需要root / grand parent来建立一些comon的东西,但子站点不需要它的名字)

检查文档:

ui-sref

  

将链接(.state("wizard", { parent: 'home', 标记)绑定到状态的指令。如果状态具有关联的URL,则该指令将自动生成&amp;通过 $ state.href()方法更新href属性。单击该链接将触发带有可选参数的状态转换   ...

     

您可以使用<a>属性指定要传递给 $ state.go()的选项。选项仅限于位置,继承和重新加载。

     

ui-sref-opts - 字符串 - 'stateName'可以是任何有效的绝对或相对状态

答案 1 :(得分:3)

  

[S] tep one嵌入在主页上而不是单独的状态

您应该将每个ui视图视为一种状态,但将wizard.where声明为default/index state

请注意,本教程使用$ urlRouterProvider使form/profile成为默认状态。

// catch all route
// send users to the form page 
$urlRouterProvider.otherwise('/form/profile');

但是,以这种方式,/form将最终为/form/profile

但是,您可以使用minor modification创建一个空的URL状态:

// route to show our basic form (/form)
.state('form', {
    url: '/form',
    templateUrl: 'form.html',
    controller: 'formController',
    abstract: true //<-- Declare parent as an abstract state. 
})

// nested states 
// each of these sections will have their own view
// url will be nested (/form)
.state('form.profile', {
    url: '', //<-- Empty string for "profile" state to override the /form abstract state
    templateUrl: 'form-profile.html'
})

// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form'); //<-- Default state is empty

@ radim-köhler还提供了对UI路由器和状态定义的深入了解。