Question

在最初设置我的控制器weddingPrice值之后，由函数引起的更改似乎不会更改变量。它可能是一个简单的错误 - 任何人都可以帮忙吗？

当调用sendWeddingQuoteInfo（）时，它似乎发送原始weddingPrice，而不是检查返回旅程切换时已更新的那个。

应该通过本地设置功能在开始时设置婚礼价格。然后，如果返回旅程切换为on，则应触发returnJourneyChange（），更改全局weddingPrice。按下提交引用按钮时，应该更新weddingPrice并将其发送到下一页。目前这不会发生 - 不知道为什么。

//wedding.html
<ion-view view-title="Wedding Pax Num" can-swipe-back="true">
  <ion-content ng-controller="WeddingPaxCtrl">
    <div class="card">
      <div class="item centerText" style="background-color: brown;">
        <h2>CALCULATE WEDDING</h2>
      </div>
    </div>
    <div class="padding20Top padding20Bottom">
      <h2 class="centerText">Select number of Passengers</h2>
      <input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
      <h6 class="centerText">PASSENGERS</h6>
    </div>

    <ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
    </ion-toggle>

    <ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>

    <div>
      <h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
    </div>

 </ion-content>
 <div class="endOfPageButton">
   <a href="#/app/home/tester">
    <button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
   </a>
 </div>
</ion-view>

//controller.js
app.controller('WeddingPaxCtrl', function($scope, $stateParams, PassData, WhichQuote, CostOfMarriage, StoreQuoteData, WeddingData, DataThrow) {
  var item = WeddingData.getWeddingDataObject(); 

  $scope.passengerNo = 49;
  $scope.returnJourney = { checked: false };
  $scope.midnightReturn = { checked: false };
  var weddingPrice;
  $scope.returnJourney;
  $scope.midnightReturn;
  setup();
  var sendInfo;

  function setup() {
    console.log("setup called");
    weddingPrice = CostOfMarriage.getPrice(item[0], $scope.passengerNo,  $scope.returnJourney.checked, $scope.midnightReturn.checked);
  }


  $scope.returnJourneyChange = function() {
    console.log("return j called");
    weddingPrice = 1000;
    console.log("wedding price is now" + weddingPrice);

  }
  $scope.midnightReturn = function() {

  }
  $scope.getCostBreakDown = function() {

  }

  $scope.sendWeddingQuoteInfo = function() {
    // var weddingPrice = $scope.weddingPrice;
    console.log("WeddingPrice is " + weddingPrice + weddingPrice);
    var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
    StoreQuoteData.setQuoteData(sendInfo);
    WhichQuote.setInfoLabel("Wedding");
  }   
})

Answer 1

我认为您的ng-controller属性不在正确的位置。因此，submit按钮的范围不同。我已将控制器移动到ion-view元素，然后点击按预期工作。

请查看下面的演示或jsfiddle。（我已经评论了很多代码，只是为了让演示工作。）

var app = angular.module('demoApp', ['ionic']);

app.controller('WeddingPaxCtrl', function($scope, $stateParams) { //, WeddingData, DataThrow) {
  //var item = WeddingData.getWeddingDataObject(); 

  $scope.passengerNo = 49;
  $scope.returnJourney = {
    checked: false
  };
  $scope.midnightReturn = {
    checked: false
  };
  var weddingPrice;
  $scope.returnJourney;
  $scope.midnightReturn;
  setup();
  var sendInfo;

  function setup() {
    console.log("setup called");
    weddingPrice = 100; //CostOfMarriage.getPrice(item[0], $scope.passengerNo,  $scope.returnJourney.checked, $scope.midnightReturn.checked);
  }


  $scope.returnJourneyChange = function() {
    console.log("return j called");
    weddingPrice = 1000;
    console.log("wedding price is now" + weddingPrice);

  }
  $scope.midnightReturn = function() {

  }
  $scope.getCostBreakDown = function() {

  }

  $scope.sendWeddingQuoteInfo = function() {
    // var weddingPrice = $scope.weddingPrice;
    console.log("WeddingPrice is " + weddingPrice + weddingPrice);
    //var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
    //StoreQuoteData.setQuoteData(sendInfo);
    //WhichQuote.setInfoLabel("Wedding");
  }
})

<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />

<ion-view ng-app="demoApp" view-title="Wedding Pax Num" can-swipe-back="true" ng-controller="WeddingPaxCtrl">
  <ion-content>
    <div class="card">
      <div class="item centerText" style="background-color: brown;">
        <h2>CALCULATE WEDDING</h2>
      </div>
    </div>
    <div class="padding20Top padding20Bottom">
      <h2 class="centerText">Select number of Passengers</h2>
      <input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
      <h6 class="centerText">PASSENGERS</h6>
    </div>

    <ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
    </ion-toggle>

    <ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>

    <div>
      <h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
    </div>

  </ion-content>
  <div class="endOfPageButton">
    <!---<a href="#/app/home/tester">-->
    <button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
    <!--</a>-->
  </div>
</ion-view>

角度控制器值似乎恢复为原始值

1 个答案: