Angular controller value seeming to revert to original value

Question

After originally setting my controller weddingPrice value a change caused by a function does not seem to change the variable. Its probably a simple error- can anyone help?

When sendWeddingQuoteInfo() is called it seems to send the original weddingPrice, not the one which has been updated when the return journey toggle has been checked.

What should happen is that the wedding price should be set at the start through the local setup function. Then if the return journey toggle is switched to on, the returnJourneyChange() should be fired, changing the global weddingPrice. When the Submit Quote button is pressed this should take the updated weddingPrice and send it to the next page. Currently this does not happen- no idea why.

//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");
  }   
})

score 1 · Accepted Answer · answered Jun 24 '15 at 23:15

I think your ng-controller attribute is not at the right place. So the scope of your submit button is different. I've moved the controller to ion-view element then the click is working as expected.

Please have a look at the demo below or here at jsfiddle. (I've commented a lot of your code just to make the demo work.)

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>

Excellent! @awolf This fixed it- such a silly error; thanks for spotting it. — Lindsey, Jun 24 '15 at 23:22
if you move the ng-controller statement to the ion-view the $scope.passengerNo no longer binds. Should the scope not cascade to this child div that contains the input tag containing the $scope.passengerNo? — Lindsey, Jun 24 '15 at 23:48
The controller is at the right place. Just inheritance of scope was not working. Have a look at the ["dot rule"](http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model) and this [updated fiddle](http://jsfiddle.net/awolf2904/w2w2w0j1/1/). — AWolf, Jun 25 '15 at 05:55

Angular controller value seeming to revert to original value

1 Answers1