使用不同的控制器检索另一个页面上的选择选项

Question

我正在尝试构建一个 cordova 应用程序。在这些功能中，我想添加一个下拉选择选项，用户可以选择并存储该选项，以便以后通过电子邮件发送请求。我在 options.html 页面中添加了选择选项，我希望在 order.html 页面中填充所选选项。解决此问题的最佳方法是什么？

这是我当前的 options.html，其中用户 optionsController：

   <md-card ng-repeat="item in items.results | filter:true">
     <img ng-src="{{items.img}}" 
          class="md-card-image" 
          alt="">
          <md-card-content class="content">
              <h2 class="md-title"><div ng-bind-html="item.name"></div></h2>
              <h4>{{ item.price | currency }}</h4>
              <h4>Qty {{ item.qty }}</h4>
              <md-list>
                  <h2 class="md-title" style="color:#3F51B5;">Select Your Side</h2>
                  <md-divider></md-divider>
                  <md-list-item layout="row">
                      <md-select aria-label="side set" class="md-accent" ng-model="item.type">
                      <md-option ng-value="side.name" ng-repeat="side in item.sides">{{ side.name }}</md-option>
                      </md-select>
                  </md-list-item>
              </md-list>
           </md-card-content>
           <md-action-bar layout="row" 
                          layout-align="end center">
                          <md-button class="md-fab md-accent fab" 
                                     aria-label="Remove From Cart" 
                                     ng-click="remove(item);showRemovedToast();"                               
                                     ng-class="{active:item.active}">
                                     <md-icon md-svg-src="img/icons/remove.svg"></md-icon>
                          </md-button>
            </md-action-bar>
      </md-card>

我正在检索side.name下的JSON数据，数据如下：

 var app = angular.module('myApp', []);

 app.controller('MyCtrl', ['$scope',
  function MyCtrl($scope) {
    $scope.items = {
  "results": [{
    "active": false,
    "desc": "With arugula, smoked almonds \u0026 chipotle vinaigrette",
    "img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Watermelon-Quinoa-Jimaca-Salad.jpg",
    "name": "Watermelon Quinoa Jicama Salad (\u003cspan style=\"color: lightblue;\"\u003eVE\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e, \u003cspan style=\"color: yellow;\"\u003eDF\u003c/span\u003e)",
    "price": 14,
    "sides": [{
      "active": false,
      "name": "Soup"
    }, {
      "active": false,
      "name": "Salad"
    }, {
      "active": false,
      "name": "Fries"
    }],
  }, {
    "active": false,
    "desc": "Buffalo mozzarella, tomato, marinated artichoke hearts, black olives, pesto \u0026 balsamic drizzle",
    "img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Mediterranean-Salad.jpg",
    "name": "Mediterranean Salad (\u003cspan style=\"color: lightgreen;\"\u003eV\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e)",
    "price": 15,
    "sides": [{
      "active": false,
      "name": "Soup"
    }, {
      "active": false,
      "name": "Salad"
    }, {
      "active": false,
      "name": "Fries"
    }],
  }]
  };
  }
  ]);

我的order.html如下，里面使用了orderController：

 <md-card>
  <md-card-content>
    <h3 class="md-subhead" align="center">Review And Submit Order</h3>
    <md-divider></md-divider>
    <md-list ng-repeat="item in items.results | filter:true">
        <md-list-item layout="row">
            <h3><div ng-bind-html="item.name"></div> Qty:{{item.qty}}</h3>
            <span flex></span>
            <h3>{{ item.price | currency }}</h3>
        </md-list-item>
        <md-list-item layout="row">
            <div id="side"></div>
        </md-list-item>
         </md-list>
    <md-divider></md-divider>
    <md-list>
        <md-list-item layout="row">
            <h3 class="md-subhead">Order Total:</h3>
            <span flex></span>
            <h3>{{ total(items.results) | currency }}</h3>
        </md-list-item>
    </md-list>
</md-card-content>
</md-card>

<md-card ng-if="(items.results | filter : {active: true}).length > 0">
<md-card-content layout-padding>

<form name="order">
 <md-input-container flex>
  <label>Name</label>
  <input ng-model="name">
 </md-input-container>
 <md-input-container flex>
     <label>Phone</label>
  <input ng-model="phone">
 </md-input-container>
  <md-input-container flex>
    <label>Address</label>
    <input ng-model="address">
  </md-input-container>
  <md-input-container flex>
    <label>Email</label>
    <input ng-model="email">
  </md-input-container>
  <md-input-container flex>
    <label>Special Requests</label>
    <textarea ng-model="requests" 
              columns="1" 
              md-maxlength="150"></textarea>
  </md-input-container>
</form>

</md-card-content>

<md-card-content layout="row"
                 layout-align="end center">

<md-button class="md-raised md-primary"
           ng-controller="EmailController"
           ng-click=sendMail()>
           Place Order
</md-button>

</md-card-content>
 </md-card>

我希望在 div 'side' 中填充选定的 Side - 我该怎么做？我尝试了 localstorage，但不确定如何在不同的页面上存储和填充。任何帮助将不胜感激。

Answer 1

将值传递到另一个页面，简单的方法：

how to pass more than one value to next page in angularjs

使用广播：

在控制器 1 内

$scope.$root.$broadcast("triggerEvent", { pass_this_value: yourValue});

这是事件监听器

$scope.$on("triggerEvent", function (event, args) {
       //do what u want to 
});

Answer 2

方法 1 - 使用服务

您创建了一个专门用于在控制器/指令或其他服务之间传递数据的服务。

方法 2 - 使用事件

使用您需要的数据广播/发送一个事件，您以后可以在应用程序的每个部分收听这些数据。

方法 3 - 将数据作为路由参数传递

如果您使用 angular 路由器或 ui-router（或者可能是任何其他路由器），您可以将数据作为路由参数传递，稍后您可以在连接到该路由的控制器中侦听。

所以，你可以想出所有这 3 种方法，然后选择一种更适合你的方法。在这种情况下，您应该使用 event 方法，因为您要传递由 UI 交互创建的数据。