javascript - AngularJS Html 不会随着工厂的数据更改而更新
问题描述
我从这个简单的plunkr开始
据我所知,它只使用一个组件。我有一个使用多个组件的项目。我有一个购物车,用户单击添加按钮将项目添加到所述购物车。结帐组件只是清空购物车。我希望当购物车为空时,显示器也为空,并且总数将显示 0.00,但这并没有发生。据我所知,HTML 仅更改页面加载而不是更改数据,这就是问题所在,但我的理解是 Angular 会自行解决这个问题。
提前致谢
相关代码:
app.config.js(此文件具有工厂和结帐功能)
'use strict';
angular.
module('floorForceApp').
config(['$routeProvider', '$provide',
function config($routeProvider,$provide) {
$routeProvider.
when('/home', {
template: '<home-page></home-page>'
}).
when('/floors', {
template: '<floor-page></floor-page>'
}).
when('/cabinets', {
template: '<cabinet-page></cabinet-page>'
}).
when('/walls', {
template: '<wall-page></wall-page>'
}).
when('/checkout', {
template: '<checkout-page></checkout-page>'
}).
otherwise('/home');
},
]).factory('floorForceCart',function(){
let total = 0;
let addedItems = [];
// let additem = function(item,price){
// }
return{
addItems:function(item,count){
let exist =false;
$.each(addedItems,function(i,v){
if(v.itemNo === item.itemNo){
exist = true;
v.count = v.count + count;
total = total + (item.itemPrice*count);
}
});
if(!exist){
let toPush = {};
toPush.itemNo = item.itemNo;
toPush.count = count;
toPush.itemName = item.itemName;
toPush.itemPrice = item.itemPrice;
addedItems.push(toPush);
total = total + (item.itemPrice*count);
}
console.log("Cart:",addedItems);
console.log("Total:",total);
},
removeItems: function(item,count){
$.each(addedItems,function(i,v){
if(v.itemNo === item.itemNo){
v.count = v.count - count;
total = total - (item.itemPrice * count);
if(v.count == 0){
addedItems.splice(i,0);
}
}
});
},
getTotal:function(){
return total;
},
getCart:function(){
return addedItems;
},
checkout:function(){
total = 0;
addedItems = [];
console.log("Check out successful.");
console.log("Total:",total,"Cart:",addedItems);
alert("Checkout Successful!");
}
};
});
checkout-page.component.js(数据从工厂加载到这里)
'use strict';
angular.
module('checkoutPage').
component('checkoutPage',{
templateUrl: 'checkout-page/checkout-page.template.html',
controller: function checkOutController($scope,$http,floorForceCart){
let self = this;
$scope.total = floorForceCart.getTotal();
$scope.cart = floorForceCart.getCart();
$scope.checkOut = function(){
floorForceCart.checkout();
}
}
})
checkout-page.html(此页面显示结帐)
<div>
<div style="height:30em;">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-4 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-8 h-100 ">
<div class="row h-100">
<div class="checkOutTitleDiv titleDiv">Checkout</div>
<div class="checkOutCartDiv paddingZero">
<div ng-repeat="item in cart" class="row marginAuto cartItemRow">
<div class="itemNameDiv col-sm-5">{{item.itemName}}</div>
<div class="itemPriceDiv col-sm-3">{{item.itemPrice|currency}}</div>
<div class="itemQuantityDiv col-sm-4">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 itemQuantity">{{item.count}}</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
<div class="checkOutButtonDiv paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-4 cartTotalDiv">
<div class="">Total:{{total|currency}}</div>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input class="checkOutButton btn btn-success" ng-click="checkOut()" type="button"value="Check Out"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
这是因为在控制器中,您在 $scope 中添加了一个属性,该属性引用了工厂中addedItems变量引用的相同项目数组:
$scope.total = floorForceCart.getTotal();
$scope.cart = floorForceCart.getCart();
然后,当您从工厂调用checkout时,您将addedItems变量从工厂重新分配给新数组,并将 0 分配给总变量。问题是属性 $scope.total 和 $scope.cart 没有任何方式知道这一点。$scope.cart 仍将指向带有项目的旧数组。
您可以通过以下任一方式解决此问题:
将您的 $scope.checkOut 更改为
$scope.checkOut = function(){
floorForceCart.checkout();
// And refresh your $scope
$scope.total = floorForceCart.getTotal();
$scope.cart = floorForceCart.getCart();
}
或者,不是在工厂中为 addedItems 分配一个新数组,而是使用以下命令清除它:
addedItems.length = 0;
如果你采用最后一种方法,你仍然需要做 $scope.total = floorForceCart.getTotal(); 在 floorForceCart.checkout() 之后;更新 $scope 中的总数。
推荐阅读
- laravel - Laravel:构建控制器时合同文件不可实例化
- java - 我可以减少代码中的 pdfbox 内存使用还是应该扩展 Java 堆空间
- flutter - 使列在颤动中可滚动
- python - 如何在python的嵌套循环中运行字符串数组
- javascript - 在 Rails 6 中的 DB 中保存模型后如何执行 JS?
- excel - 需要压缩的扩展 SUMPRODUCT 公式
- vue.js - Vue.js v-if 条件在 v-for 循环中无法正常工作。为什么?
- python-3.x - 多对多字段获取所有未选择的用户
- typescript - 如何使用 date-fns 更正时区?
- c# - Input.GetButtonDown("跳转"); 在 Unity 中不适用于空格键