如何在首次提交後更新範圍

Question

我是Angular的新手，所以我覺得我在這裏缺少一些基本的東西。我有一個簡單的應用程序與5個屏幕。在前三個屏幕上，用戶輸入的數字在最後兩個屏幕上的計算結果爲sumarry。我有我的表單設置來提交數據，並提交給Zillow的API調用。我的問題是，如果我在離開並提交數據後返回到屏幕，我無法在摘要屏幕上獲取數據更新。我認爲這是一個範圍問題，但我不知道如何處理它。

因此，簡而言之，當我更改表單域中的數據並再次單擊提交時，沒有任何內容會在摘要頁面上更新。

這是我在我的控制器中。

angular.module('starter.controllers', []) 

.controller('PropCtrl', function($scope, zillowFactory, $rootScope) { 
    // pass data from form fields to zillowFactory 
    // store returned object for use in view 
    // $scope.update = fucntion() {}; 
    // make api call to Zillow 
    // pass back object from zillow 
    $scope.prop = zillowFactory.prop; 

    $scope.update = function(){ 
    console.log('update ran') 
    zillowFactory.getProperty($scope.prop); 
    }; 
}) 

.controller('IncomeCtrl',['$scope','zillowFactory', function($scope, zillowFactory) { 
    $scope.prop = zillowFactory.prop; 

    $scope.update = function(){ 
    zillowFactory.getProperty($scope.prop); 
    }; 

    var rentalincome = ($scope.prop.rental || 0); 
    var house = ($scope.prop.householdincome || 0); 
    $scope.prop.totalincome = (house * 1)+ rentalincome; 

}]) 
.controller('ExpensesCtrl',['$scope','zillowFactory', function($scope, zillowFactory) { 
    $scope.prop = zillowFactory.prop; 
    $scope.update = function(){ 
    zillowFactory.getProperty(); 
    }; 

}]) 

.controller('SumCtrl', ['$scope', 'zillowFactory', function($scope, zillowFactory) { 
    $scope.prop = zillowFactory.prop; 

    zillowFactory.getProperty(); 
    var expenses30 = ($scope.prop.monthlypayment.response.monthlyPropertyTaxes * 12) + ($scope.prop.monthlypayment.response.monthlyHazardInsurance * 12) + ($scope.prop.monthlypayment.response.thirtyYearFixed.monthlyPrincipalAndInterest * 12) + ($scope.prop.maintenance * 12) 
    + ($scope.prop.fees * 12) + ($scope.prop.utilities * 12) + ($scope.prop.other * 12) + ($scope.prop.price/27.5); 

    var expensesfifteen = ($scope.prop.monthlypayment.response.monthlyPropertyTaxes * 12) + ($scope.prop.monthlypayment.response.monthlyHazardInsurance * 12) + ($scope.prop.monthlypayment.response.fifteenYearFixed.monthlyPrincipalAndInterest * 12) + ($scope.prop.maintenance * 12) 
    + ($scope.prop.fees * 12) + ($scope.prop.utilities * 12) + ($scope.prop.other * 12) + ($scope.prop.price/27.5); 


    var expensesfive = ($scope.prop.monthlypayment.response.monthlyPropertyTaxes * 12) + ($scope.prop.monthlypayment.response.monthlyHazardInsurance * 12) + ($scope.prop.monthlypayment.response.fiveOneARM.monthlyPrincipalAndInterest * 12) + ($scope.prop.maintenance * 12) 
    + ($scope.prop.fees * 12) + ($scope.prop.utilities * 12) + ($scope.prop.other * 12) + ($scope.prop.price/27.5); 

    $scope.prop.expenses30 = expenses30; 
    $scope.prop.expenses15 = expensesfifteen; 
    $scope.prop.expenses5 = expensesfive; 

}]) 
.controller('AnalysisCtrl', [ '$scope', 'zillowFactory', '$location', '$window', function($scope, zillowFactory, $location, $window) { 
$scope.prop = zillowFactory.setProperty($scope.prop); 

    zillowFactory.getProperty($scope.prop); 

    var taxerate = 4/10; 

    var annualincome = $scope.prop.householdincome + ($scope.prop.rental * 12); 
    $scope.annualincome = annualincome; 

    var expenses30 = ($scope.prop.monthlypayment.response.monthlyPropertyTaxes * 12) + ($scope.prop.monthlypayment.response.monthlyHazardInsurance * 12) + ($scope.prop.monthlypayment.response.thirtyYearFixed.monthlyPrincipalAndInterest * 12) + ($scope.prop.maintenance * 12) 
    + ($scope.prop.fees * 12) + ($scope.prop.utilities * 12) + ($scope.prop.other * 12) + ($scope.prop.price/27.5); 

    var expensesfifteen = ($scope.prop.monthlypayment.response.monthlyPropertyTaxes * 12) + ($scope.prop.monthlypayment.response.monthlyHazardInsurance * 12) + ($scope.prop.monthlypayment.response.fifteenYearFixed.monthlyPrincipalAndInterest * 12) + ($scope.prop.maintenance * 12) 
    + ($scope.prop.fees * 12) + ($scope.prop.utilities * 12) + ($scope.prop.other * 12) + ($scope.prop.price/27.5); 


    var expensesfive = ($scope.prop.monthlypayment.response.monthlyPropertyTaxes * 12) + ($scope.prop.monthlypayment.response.monthlyHazardInsurance * 12) + ($scope.prop.monthlypayment.response.fiveOneARM.monthlyPrincipalAndInterest * 12) + ($scope.prop.maintenance * 12) 
    + ($scope.prop.fees * 12) + ($scope.prop.utilities * 12) + ($scope.prop.other * 12) + ($scope.prop.price/27.5); 

    $scope.prop.expenses30 = expenses30; 
    $scope.prop.expenses15 = expensesfifteen; 
    $scope.prop.expenses5 = expensesfive; 

    var adjusted = annualincome - expenses30; 

    var taxes = adjusted * taxerate; 



    var adjustedfifteen = annualincome - expensesfifteen; 

    var taxes15 = adjustedfifteen * taxerate; 

    var adjusted5 = annualincome - expensesfive; 

    var taxes5 = adjusted5 * taxerate; 

    $scope.maxwriteoff30 = 250000; 

    $scope.prop.cashflow30rep = annualincome - taxes; 
    $scope.prop.cashflow15rep = annualincome - taxes15; 
    $scope.prop.cashflow5rep = annualincome - taxes5; 

    var adjustedWOrep = annualincome - 25000; 
    var taxesWOrep = adjustedWOrep * taxerate; 

    $scope.cashflowWOrep = adjustedWOrep - taxesWOrep; 


    $scope.refresh = function() { 

      $location.path('/tab/prop'); 
      $window.location.reload(); 

    }; 

}]); 

以下是我設置所有表單視圖的方式。 Prop.html

 <form novalidate> 

     <label class="item item-input item-stacked-label"> 
     <span class="input-label">Purchase Price</span> 
     <input name="prop[price]" type="tel" ng-model="prop.price" ng-init="prop.price=600000"> 
     </label> 

     <label class="item item-input item-stacked-label"> 
     <span class="input-label">Down Payment (%)</span> 
     <input type="tel" name="prop[payment]" ng-model="prop.payment" ng-init="prop.payment=20" ng-click="update(prop)"> 
     </label> 
     <label class="item item-input item-stacked-label"> 
     <span class="input-label">Zipcode</span> 
     <input type="tel" name="prop[zip]" ng-model="prop.zip" ng-init="prop.zip=93110"> 
     </label> 

     <a class="button button-full button-dark" type="submit" id="submit" value="Submit" href="#/tab/income" ng-click="update(prop)" >NEXT</a> 

    </form> 

我有其中數據被提交給丙對象2個其他視圖和然後2，其中它被計算的景色。

這裏是我的Zillow廠：

angular.module('starter.services', []) 
.factory('zillowFactory', function prop($http){ 

    return { 
    setProperty: function(prop){ 
     console.log("in the set property call"); 
     prop = {}; 
     prop.price = ""; 
     prop.payment = ""; 
     prop.zip = ""; 
     prop.fees = ""; 
     prop.rental = ""; 
     prop.totalincome = ""; 
     prop.householdincome = ""; 
     prop.maintenance = ""; 
     prop.utilities = ""; 
     prop.other = ""; 
     return prop; 
    }, 
    getProperty: function(prop) { 
     prop.montlypayment = {}; 
     // console.log("This is a price" + " " + prop.price); 
     console.log("in the get property call"); 
     $http({ 
     method: 'GET', 
     url: 'http://www.zillow.com/webservice/GetMonthlyPayments.htm?MYAPI KEY HEREe=' + prop.price +'&down=' + prop.payment +'&zip=' + prop.zip + '&output=json', 
     type: 'JSON', 
     data: '' 
     }).then(function successCallback(response) { 
     prop.montlypayment = response.data; 
     debugger 
     return prop.monthlypayment; 

     // this callback will be called asynchronously 
     // when the response is available 
     }, function errorCallback(response) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     }); 
    } 
    } 

}) 

感謝您的幫助！

編輯：在這一點上，我現在可以得到的數據從第一個控制器，進入facotry，並撥打電話。之後，它似乎全部丟失或覆蓋，$ scope.prop被設置爲Null。

我已經玩了兩天了，到目前爲止，我還沒有想出如何通過控制器移動數據。我一直在使用調試器，並且對於下一步該做什麼感到有點不知所措。

Answer 1

這是一個有點分不清你正在嘗試做的完全是，但至少有兩個問題：由

1）你叫zillowFactory.getProp()幾次沒有理由，但getProp（）函數改變論證的屬性。所以它可能沒有任何傷害（除了導致一些無用的網絡請求），但是如果你期望它做一些有用的事情，那不是。

2）在SumCtrl中，使用$ scope.prop上的值分配expenses30,expensesFifty和expensesFive的值。但是您在zillowFactory.getProperty()中異步地設置了$ scope.prop的值（在zillow調用返回之後）。所以這些值將不會被正確計算。

我只是將zillowFactory重寫爲（a）保存數據，並（b）計算您想要從該數據計算的值。沿着這些路線的東西：

angular.factory('zillowFactory', function($http) { 
 

 
    var prop = {}; 
 
    return { 
 
    /** get the prop. 
 
    * to update, you can do $scope.prop = zillowFactory.getProp() in your controllers 
 
    */ 
 
    getProp() { 
 
     return prop; 
 
    }, 
 
    getZillow() { 
 
     $http.get('http://www.zillow.com/webservice/GetMonthlyPayments.htm?MYAPI KEY HEREe=' + prop.price +'&down=' + prop.payment +'&zip=' + prop.zip + '&output=json').then(function() { 
 
     prop.montlypayment = response.data; 
 
     }) 
 
    }, 
 
    getExpenses30: function(){ 
 
     // you might want to check if these values are set and return "null" or something if they are not 
 
     return (prop.monthlypayment.response.monthlyPropertyTaxes * 12) + (prop.monthlypayment.response.monthlyHazardInsurance * 12) + (prop.monthlypayment.response.thirtyYearFixed.monthlyPrincipalAndInterest * 12) + (prop.maintenance * 12) 
 
    + (prop.fees * 12) + (prop.utilities * 12) + (prop.other * 12) + (prop.price/27.5); 
 
    }, 
 
    // 
 
    getOtherStuff: function() { 
 
     etc... 
 
    } 
 
})