Question

我有一个包含四个部分的大页面，旨在用作商店的“单页结帐”。

[Header]
...
[Section 1: delivery address form]
[Section 2: payment address form ]
[Section 3: payment option form]
[Section 4: flags / agreements]
...
[Footer]

每个部分都包含一个表单。要求是将这四个部分映射到角度ui-router状态（想法是使用现有的路由器配置，当每个部分放置在不同的页面/状态时，先前用于“多页面检出”）

当用户点击/滚动（检查该部分是否在视口中？）到同一页面上的特定部分时，是否可以切换状态？有没有很好的例子说明如何实现这一点？

在项目中我有以下版本：

{
  "angular": "~1.5.0",
  "angular-route": "~1.5.0"
}

Answer 1

为什么你需要＆＃34;切换状态＆＃34;反正在页面？您可以在同一页as described here.

中拥有多个命名视图

这是一个演示上述内容的简单插件：

https://plnkr.co/edit/fhK8wix4Ve5nCiKKKejX?p=preview

HTML：

<div>
  <div ui-view="first"></div>
  <div ui-view="second"></div>
  <div ui-view="third"></div>      
</div>

JS：

angular.module('test', ['ui.router'])
.config(function($stateProvider) {
  $stateProvider
  .state('page', {
    url: '',
    views: {
      'first': { template: '<div>1</div>' },
      'second': { template: '<div>2</div>' },
      'third': { template: '<div>3</div>' }
    }
  })
})

点按钮更改视图，点击按钮：https://plnkr.co/edit/MzaeQMkSJiev2Vsfpx8c?p=preview

单击或滚动到页面部分时切换ui-router状态

1 个答案: