Question

我已将simpleCart引入我的AngularJS应用程序。

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

重现问题的步骤：

打开：http://plnkr.co/edit/omUfQDTJbzPi1ykzPJ9o?p=preview
点击查看商品超链接
点击添加到购物车几次。
刷新浏览器。
点击查看商品超链接
请注意，您无法看到购物车中的商品＆＃39;
点击添加到购物车
请注意，购物车现在显示的是更新后的值

如果我从我的应用中取出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>

Answer 1

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

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

AngularJS + simpleCart问题显示购物车内容直到项目被添加

1 个答案: