2014-10-20 134 views
1

我已經將simpleCart引入到我的AngularJS應用程序中。AngularJS + simpleCart問題顯示購物車內容直到添加商品

我遇到的問題是,我只能看到購物車的內容,當我點擊添加到購物車按鈕。

步驟來重現問題:

  1. 公開賽:http://plnkr.co/edit/omUfQDTJbzPi1ykzPJ9o?p=preview
  2. 點擊查看產品超級鏈接
  3. 單擊添加到購物車幾次。
  4. 刷新瀏覽器。
  5. 點擊查看產品超級鏈接
  6. 通知你不能看到項目在購物車'
  7. 單擊添加到購物車
  8. 注意,現在的車顯示了更新後的值

如果我把角出我的應用程序,購物車和項目將始終顯示預期。

Angular是否在利用可見性進行操作?

的index.html:

<head> 

    <script src="jQuery-1.11.1.js"></script> 
    <script src="simpleCart.js"></script> 
    <script> 
    simpleCart({ 
     checkout: { 
     type: "PayPal", 
     email: "[email protected]" 
     } 
    }); 
    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> 
+0

嗨我有同樣的問題,你有沒有發現任何提示? – hugsbrugs 2014-11-28 12:22:11

回答

1

我發現,添加到simpleCart.update();控制器使車適當地出現。 請參閱:http://plnkr.co/edit/QQTceeYdDcJ8qDDWVJdP?p=preview

看來,SimpleCart使它的第一遍尋找DOM元素,它應該在angular創建它們之前更新(因爲內容尚未加載)。 update()調用爲SimpleCart提供了另一個查找這些元素的機會。

相關問題