使用UI路由器将数据从Angular Bootstrap Typeahead推送到另一个选项卡

Question

我有三个选项卡：客户、计费和方法。在第一个选项卡上，我有Bootstrap Typeahead，它连接到客户的json文件。第二个选项卡是具有未付费用的客户帐户的详细视图。最后，第三个标签是实际向客户收取信用卡费用。此外，我正在使用UI路由器在复杂的层次结构中导航。选项卡是名为make payments的页面的命名视图，该页面是名为payments的父州的子州。我正在尝试使用第一个选项卡（客户）中的打字来选择和查看第二个选项卡（账单）中的客户详细信息。我希望当用户从下拉列表中选择人员时会发生这种情况，他们应该立即导航到下一个选项卡，下一个标签应该显示该人员的详细信息。我真的很难理解如何将数据从打字提前到接下来的两个选项卡，以及我是否需要服务来完成这项工作。

支付.html（我的标签页）：

<h3 class="text-center">Make a One-Time Payment</h3>
<uib-tabset type="pills nav-pills-centered">
  <uib-tab heading="1">
    <div ui-view=customers></div>
  </uib-tab>
  <uib-tab heading="2">
    <div ui-view=billing></div>
  </uib-tab>
  <uib-tab heading="3">
    <div ui-view=method></div>
  </uib-tab>
</uib-tabset>

customers.html&typeahead.js ctrl:

angular
  .module('myApp')
  .controller('TypeAheadCtrl', function($scope, $http) {
    $http.get('customers.json').success(function(data) {
      $scope.customers = data;
    });
    var self = this;
    self.submit1 = function() {
      console.log('First form submit with', self.customer)
    };
  });

<div ng-controller="TypeAheadCtrl as ctrl">
  <form ng-submit="ctrl.submit1()" name="customerForm">
    <div class="form-group">
      <label for="account">Account Number</label>
      <input type="text" class="form-control" placeholder="Search or enter an account number" ng-model="ctrl.customer.account" uib-typeahead="customer as customer.index for customer in customers | filter:$viewValue | limitTo:6" typeahead-template-url="templates/customer-tpl.html"
      typeahead-no-results="noResults">
    </div>
  </form>
</div>

app.js（我有ui路由器的东西）

.config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/payments/make-payment');
      $stateProvider
      // HOME STATES AND NESTED VIEWS ========================================
        .state('payments', {
        url: '/payments',
        templateUrl: 'views/payments.html'
      })
      .state('activity', {
          url: '/activity',
          templateUrl: 'views/activity.html'
        })
        // nested lists
        .state('payments.make-payment', {
          url: '/make-payment',
          views: {
            '': {
              templateUrl: 'views/make-payment.html'
            },
            '[e-mail]-payment': {
              templateUrl: 'views/customers.html'
            },
            '[e-mail]-payment': {
              templateUrl: 'views/billing.html'
            },
            '[e-mail]-payment': {
              templateUrl: 'views/method.html'
            });
        });

billing.html

<p>{{ctrl.customer.account.name}}</p>
<p>{{ctrl.customer.account.address}}</p>
<p>{{ctrl.customer.account.email}}</p>
<p>{{ctrl.customer.account.phone}}</p>

Answer 1

您可以在两个选项卡中将所选客户数据发送到服务并从服务中提取。

所以我想当你从下拉列表中选择一个用户时，或者你可以称之为myFactory.setCustomer（data）.的任何东西

在其他两种状态下，您可以查看myFactory 中的getCustomer（）函数

.factory('myFactory', myFactory);
    function myFactory() {
        var customer;
        function setCustomer(data) {
            customer = data;
        }
        function getCustomer() {
            return customer;
        }
        //public API
        return {
            setCustomer: setCustomer,
            getCustomer: getCustomer
        }
    }