在尝试为我的eshop实现购物车时,我注意到initCartId和refreshCart是递归调用的,导致项目崩溃。
问题与this one相同,但这无法帮助我确定我使用递归的位置。
当我进入购物车页面时来自controller.js的警报是:
initCartId!!!
refreshCart!!!
calGrandTotal!!!
calGrandTotal!!!
calGrandTotal!!!
此时我可以在控制台上看到StackOverFlowError,但警报会继续按以下顺序再次出现:
initCartId!!!
refreshCart!!!
calGrandTotal!!!
cart.jsp
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@include file="/WEB-INF/views/template/header.jsp"%>
<div class="container-wrapper">
<div class="container">
<section>
<div class="jumbotron">
<div class="container">
<h1>Cart</h1>
<p>All the selected products in your shopping cart</p>
</div>
</div>
</section>
<section class="container" ng-app="cartApp">
<div ng-controller="cartCtrl" ng-init="initCartId('${cartId}')">
<div>
<a class="btn btn-danger pull-left" ng-click="clearCart()"><span
class="glyphicon glyphicon-remove-sign"></span>Clear Cart</a>
</div>
<table class="table table-hover">
<tr>
<th>Product</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr ng-repeat="item in cart.cartItems">
<td>{{item.product.productName}}</td>
<td>{{item.product.productPrice}}</td>
<td>{{item.quantity}}</td>
<td>{{item.totalPrice}}</td>
<td><a href="#" class="label label-danger"
ng-click="removeFromCart(item.product.productId)"> <span
class="glyphicon glyphicon-remove"></span>remove
</a></td>
</tr>
<!-- <tr>
<th></th>
<th></th>
<th>Grand Total</th>
<th>{{calGrandTotal()}}</th>
<th></th>
</tr> -->
</table>
<a href="<spring:url value="/productList" />"
class="btn btn-default">Continue Shopping</a>
</div>
</section>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="<c:url value="/resources/js/controller.js" /> "></script>
<%@include file="/WEB-INF/views/template/footer.jsp"%>
controller.js
var cartApp = angular.module ("cartApp", []);
cartApp.controller("cartCtrl", function ($scope, $http){
/* corresponding to the mapper at CartController with RequestMethod.GET */
/*
* /eMusicStore/rest/cart/'+$scope.cartId) get the cart data in Json format
* and with the success we use another function and the JSON format cart
* info will be stored into data and we pass into $scope
*/
$scope.refreshCart = function (cartId) {
alert("refreshCart!!!");
$http.get('/eMusicStore/rest/cart/'+$scope.cartId).success(function (data) {
$scope.cart=data;
});
};
$scope.clearCart = function () {
alert("clearCart!!!");
/*$http.delete('/eMusicStore/rest/cart/'+$scope.cartId).success($scope.refreshCart($scope.cartId));*/
$http.delete('/eMusicStore/rest/cart/'+$scope.cartId).success(function (data) {
$scope.refreshCart($scope.cartId);
});
};
$scope.initCartId = function (cartId) {
alert("initCartId!!!");
$scope.cartId = cartId;
/* alert("cartId:" + cartId);*/
$scope.refreshCart($scope.cartId);
};
$scope.addToCart = function (productId) {
alert("addToCart!!!");
$http.put('/eMusicStore/rest/cart/add/'+productId).success(function (data) {
/*$scope.refreshCart($http.get('/eMusicStore/rest/cart/cartId'));*/
alert("Product successfully added to the cart!");
});
};
$scope.removeFromCart = function (productId) {
alert("removeFromCart!!!");
$http.put('/eMusicStore/rest/cart/remove/'+productId).success(function (data) {
/*$scope.refreshCart($http.get('/eMusicStore/rest/cart/cartId'));*/
$scope.refreshCart($scope.cartId);
});
};
$scope.calGrandTotal = function () {
alert("calGrandTotal!!!");
var grandTotal=0;
for (var i=0; i<$scope.cart.cartItems.length; i++) {
grandTotal+=$scope.cart.cartItems[i].totalPrice;
}
return grandTotal;
};
});