我已将 simpleCart 引入到我的 AngularJS 应用程序中。
我遇到的问题是，当我单击“添加到购物车”按钮时，我只能看到购物车内容。
重现问题的步骤:
- 打开:http://plnkr.co/edit/omUfQDTJbzPi1ykzPJ9o?p=preview
- 点击“查看产品”超链接
- 点击“添加到购物车”几次。
- 刷新浏览器。
- 点击“查看产品”超链接
- 请注意，您看不到购物车中的商品''
- 点击“添加到购物车”
- 请注意，购物车现在显示了更新后的值
如果我将 Angular 从我的应用程序中删除，购物车和商品将始终按预期显示。
Angular 是否对可见性做了一些事情？
index.html:
<head>
<script src="jQuery-1.11.1.js"></script>
<script src="simpleCart.js"></script>
<script>
simpleCart({
checkout: {
type: "PayPal",
email: "you@yours.com"
}
});
simpleCart({
cartColumns: [{
attr: "name",
label: "Name"
}, {
attr: "price",
label: "Price",
view: 'currency'
}, {
attr: "quantity",
label: "Qty"
}],
cartStyle: "table"
});
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p><a href="#products">See products</a>
<div ng-app="myApp">
<ng-view></ng-view>
</div>
<script src="angular.js"></script>
<script src="angularRoute.js"></script>
<script src="script.js"></script>
</body>
产品.html:
<div class="simpleCart_shelfItem">
<h2 class="item_name"> Awesome T-shirt </h2>
<input type="text" value="1" class="item_Quantity">
<span class="item_price">$35.99</span>
<a class="item_add" href="javascript:;"> Add to Cart </a>
</div>
<br>
<div class="simpleCart_shelfItem">
<h2 class="item_name"> Rubbish T-shirt </h2>
<input type="text" value="1" class="item_Quantity">
<span class="item_price">$15.99</span>
<a class="item_add" href="javascript:;"> Add to Cart </a>
</div>
<a href="#cart">View cart</a>
<div class="simpleCart_items"></div>
<strong>Sub-total:</strong> <span class="simpleCart_total"></span>
<strong>Shipping:</strong> <span class="simpleCart_shipping"></span>
<strong>Total:</strong> <span class="simpleCart_grandTotal"></span>
最佳答案
我发现将 simpleCart.update(); 添加到 Controller 会导致购物车正确显示。
请参阅:http://plnkr.co/edit/QQTceeYdDcJ8qDDWVJdP?p=preview
SimpleCart 似乎第一次通过寻找 DOM 元素，它应该在 Angular 创建它们之前更新它们(因为内容尚未加载)。 update() 调用为 SimpleCart 提供了另一个查找这些元素的机会。
关于javascript - AngularJS + simpleCart 问题显示购物车内容直到添加项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26461330/