角度控制器的值似乎恢復到原始值

Question

最初設置我的控制器weddingPrice值後，由函數引起的更改似乎沒有更改該變量。它可能是一個簡單的錯誤 - 任何人都可以幫忙？

當sendWeddingQuoteInfo（）被調用時，它似乎發送原始weddingPrice，而不是在返回行程切換已被選中時更新的那個。

應該發生的是，婚禮價格應該在開始時通過本地設置功能進行設置。然後，如果返程旅程切換爲開啓，則應激發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>