我是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个其他视图，其中数据被提交给prop对象，然后是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。
我已经玩了两天了，到目前为止，我仍然没有想出如何通过控制器移动数据。我一直在使用调试器，对于接下来的操作有点不知所措。
答案 0 :(得分：0)
要说明你要做的事情有点难，但至少有这两个问题：
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...
}
})