AngularJS - 带向导的UI-Router

Question

我使用ui-router设置我的路线，如下所示：

$stateProvider
    .state('root', {
        url: "",
        templateUrl: 'path/login.html',
        controller: 'LoginController'
    })
    .state('basket', {
        url: "/basket",
        views: {
            '': {
                templateUrl: 'path/basket.html',
                controller: 'BasketController'
            },
            'address@basket': {
                templateUrl: 'path/address.html',
                controller: 'AddressController'
            },
            'confirmation@basket': {
                templateUrl: 'path/confirmation.html',
                controller: 'ConfirmationController'
            },
            'payment@basket': {
                templateUrl: 'path/payment.html',
                controller: 'PaymentController'
            }
        }
    });

在basket.html我使用mgo-angular-wizard创建＆＃34;步骤栏＆＃34;。

<wizard on-finish="finishedWizard()">

<wz-step title="Address">
    <div ui-view="address"></div>
</wz-step>

<wz-step title="Confirmation">
    <div ui-view="confirmation"></div>
</wz-step>

<wz-step title="Payment">
    <div ui-view="payment"></div>
</wz-step>

到目前为止，它的工作正常。但我需要创建也会在这些页面之间导航的按钮。例如：地址页面需要一个按钮，该按钮将调用确认页面。 我在网上看到了一些使用ui-sref="$state.go('basket.address')"的网页，但由于我没有使用这种结构（带点），我不知道该怎么做（使用confirmation@basket不工作。

我是Angular的新手并且正在学习流程。提前谢谢。

Answer 1

在我看来，除了Ui.Router之外，你不需要任何其他东西，因为你可以以非无状态的方式在状态之间导航（例如在服务中保存一些东西）。

一件好事可能是嵌套状态...

步骤：

1. 创建父抽象状态：购物篮，允许子状态继承视图，解析，网址片段。
2. 创建子状态：地址;确认;付款
＆＃13;
＆＃13;
angular
  .module('checkout', ['ui.router'])
  .config(function($stateProvider) {
    
    var basket = {
      name: 'basket',
      url: '/basket/',
      abstract: true,
      views: {
        "main": {
          template: "<h1>Bye</h1>",
          controller: function() { alert('bye'); }
        },
        "sidebar": {
          template: "<ul><li>LINK</li></ul>",
          controller: function() { console.log('sidebar view'); }
        }
      }
    };
    
    var address = {
      name: 'basket.address',
      url: ''
    };
  
    var confirmation = {
      name: 'basket.confirmation',
      url: 'confirmation/',
      views: {
        "main@": {
          template: "<h1>ss</h1>",
          controller: function() { alert('ss'); }
        }
      }
    };
      
  
    var payment = {
      name: 'basket.payment',
      url: 'payment/',
      views: {
        "main@": {
          template: "<h1>zz</h1>",
          controller: function() { alert('zz'); }
        }
      }
    };    
  
    $stateProvider
      .state(basket)
      .state(address)
      .state(confirmation)
      .state(payment)
    ;
  })
;
＆＃13;
<section ui-view="main"></section>
<aside ui-view="sidebar"></aside>

<ul>
  <li><a ui-sref="basket.address">Address</a></li>
  <li><a ui-sref="basket.confirmation">Confirmation</a></li>
  <li><a ui-sref="basket.payment">Payment</a></li>

</ul>
＆＃13;
＆＃13;
＆＃13;
1. 通过 angular.module（＆＃39; checkout＆＃39;）。值创建一项服务，用于存储所有结帐进度。

顺便说一句，如果您需要将所有视图和状态保存在一个中，您可能需要这个名为 STICKY STATES 的Ui.Router.extra，该链接提供了许多示例... < / p>

希望它有所帮助！