Pro AngularJS書車小部件未顯示
[英]Pro AngularJS Book Cart Widget not showing up
問題描述
我正在研究Adam Freeman撰寫的Pro AngularJS書籍，在第7章中，為購物車創建小部件時，它不會像應有的那樣在導航欄中呈現。 我已經比較過，甚至回過頭來將提供的源代碼粘貼到我的代碼上，並且兩種方式都仍然無法呈現，盡管該小部件仍然無法呈現（其中<cart-summary />是，但是其他所有操作都可以。我已經檢查了勘誤表中的這本書並沒有出版任何東西，所以我現在完全陷入了困境。我感覺這可能是其中一些東西讓我看上去很正常，但是我沒有任何運氣。在此先感謝！我的代碼：
-app.html文件：
<!DOCTYPE html>
<html lang="en" ng-app="sportsStore">
<head>
<title>SportsStore</title>
<script src="angular.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-theme.css">
<script>
angular.module("sportsStore", ["customFilters", "cart"]);
</script>
<script src="controllers/sportsStore.js"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
<cart-summary />
</div>
<div class="alert alert-danger" ng-show="data.error">
Error ({{ data.error.status }}). The product was not loaded. <a href="/app.html" class="alert-link">Click here to try again</a>
</div>
<ng-include src="'views/productList.html'"></ng-include>
</body>
</html>
-views / cartSummary.html文件：
<style>
.navbar-right { float: right !important; margin-right: 5px; }
.navbar-text { margin-right: 10px; }
</style>
<div class="navbar-right">
<div class="navbar-text">
<b>Your Cart:</b>
{{ itemCount() }} item(s),
{{ total() | currency }}
</div>
<a class="btn btn-default navbar-btn">Checkout</a>
</div>
-components / cart / cart.js文件：
angular.module("cart", [])
.factory("cart", function () {
var cartData =[];
return {
addProduct: function(id, name, price) {
var addedToExistingItem = false;
for (var i = 0; i < cartData.length; i++) {
if (cartData[i].objectId == id) {
cartData[i].count++;
addedToExistingItem = true;
break;
}
}
if (!addedToExistingItem) {
cartData.push({
count: 1, objectId: id, price: price, name: name
});
}
},
removeProduct: function(id) {
for (var i = 0; i <cartData.length; i++) {
if (cartData[i].objectId == id) {
cartData.splice(i, 1);
break;
}
}
},
getProducts: function () {
return cartData;
}
};
})
.directive("cartSummary", function(cart) {
return {
restrict: "E",
templateUrl: "components/cart/cartSummary.html",
controller: function ($scope) {
var cartData = cart.getProducts();
$scope.total = function () {
var total = 0;
for (var i = 0; i < cartData.length; i++) {
total += (cartData[i].price * cartData[i].count);
}
return total;
};
$scope.itemCount = function () {
var total = 0;
for (var i =0; i <cartData.length; i++) {
total += cartData[i].count;
}
return total;
};
}
};
});
2 個解決方案
解決方案1
0 2014-11-17 20:37:22
我解決了這個問題！ 作者采用了按任務將應用程序的各個部分放置在一起的方法，因此使用了“ components”目錄，當我創建cartSummary.html文件時，我不小心將其與所有其他部分一起放置在“ views”目錄中。 將其從“視圖”目錄中刪除並將其放置在“購物車”目錄中后，它會正確顯示。 學過的知識！
解決方案2
0 2015-10-28 03:27:35
哦，我也有這個問題。 在控制台中，出於某些奇怪的原因，它不斷顯示錯誤在以下行中：
cartData.push({count: 1, objectId: id, price: price, name: name});
在將templateUrl從原始的' components / cart / cartSummary.html '更改為' views / cartSummary.html '之后，它終於可以工作了
AngularJS：homeController沒有顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.