AngularJS + simpleCart 问题在添加项目之前显示购物车内容答案

【问题标题】：AngularJS + simpleCart Issue Showing Cart Contents Until Item is AddedAngularJS + simpleCart 问题在添加项目之前显示购物车内容
【发布时间】：2014-12-15 04:19:51
【问题描述】：

我已经在我的 AngularJS 应用程序中引入了 simpleCart。

我遇到的问题是，当我单击“添加到购物车”按钮时，我只能看到购物车内容。

重现问题的步骤：

打开：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>

products.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>

【问题讨论】：

您好，我也遇到了同样的问题，请问您有什么提示吗？

标签： javascript jquery angularjs angularjs-scope simplecart

【解决方案1】：

我发现将simpleCart.update(); 添加到控制器会导致购物车正确显示。见：http://plnkr.co/edit/QQTceeYdDcJ8qDDWVJdP?p=preview

SimpleCart 似乎第一次通过寻找应该在 Angular 创建它们之前更新的 DOM 元素（因为内容尚未加载）。 update() 调用为 SimpleCart 提供了另一个机会来查找这些元素。

【讨论】：