1

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

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

重现问题的步骤：

  1. 打开：http ://plnkr.co/edit/omUfQDTJbzPi1ykzPJ9o?p=preview
  2. 单击查看产品超链接
  3. 单击“添加到购物车”几次。
  4. 刷新浏览器。
  5. 单击查看产品超链接
  6. 请注意，您看不到购物车中的商品 ''
  7. 点击加入购物车
  8. 请注意，购物车现在显示更新的值

如果我将 Angular 从我的应用程序中取出，购物车和商品将始终按预期显示。

Angular 是否对可见性做了一些事情？

索引.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>
4

1 回答 1

1

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

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

于 2014-12-21T05:42:22.663 回答