Angular 控制器值似乎恢复到原始值

Question

在最初设置我的控制器 weddingPrice 值后，函数引起的变化似乎并没有改变变量。这可能是一个简单的错误 - 谁能帮忙？

调用 sendWeddingQuoteInfo() 时，它似乎发送了原始的 weddingPrice，而不是在 return 旅程开关被选中时更新的价格。

应该发生的是婚礼价格应该通过本地设置功能在开始时设置。然后，如果 return 旅程切换开关打开，则应触发 returnJourneyChange()，从而更改全局 weddingPrice。当按下 Submit Quote 按钮时，这应该采用更新的 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>

Angular 控制器值似乎恢复到原始值

Angular controller value seeming to revert to original value

angularjs

angularjs-controller