使用不同的控制器檢索另一頁上的選擇選項

Question

我正在嘗試構建一個cordova應用。 在其中的功能中，我想添加一個下拉選擇選項，用戶可以選擇該下拉選項並進行存儲，以便以后通過電子郵件發送請求。 我在options.html頁面中添加了select選項，並且希望在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“邊”中填充選定的邊-我該如何處理？ 我嘗試了localstorage，但不確定如何在其他頁面上進行存儲和填充。 任何幫助，將不勝感激。

Answer 1

方法1-使用服務

您創建專門用於在控制器/指令之間傳遞數據或其他服務的服務。

方法2-使用事件

使用所需的數據廣播/發射事件，以后可以在應用程序的每個部分中監聽。

方法3-將數據作為路由參數傳遞

如果您使用的是角度路由器或ui路由器（或可能是其他路由器），則可以將數據作為路由參數傳遞，稍后可以在連接到該路由的控制器中進行偵聽。

因此，您可以考慮所有這三種方法，然后選擇一種更適合您的方法。 在這種情況下，應該使用事件方法，因為您希望傳遞由UI交互創建的數據。

Answer 2

將值傳遞到另一頁，簡單方法：

如何在angularjs中將多個值傳遞給下一頁

使用廣播：

內部控制器1

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

這是活動列表

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