javascript - AngularJS 绑定(bind)数据

Question

所以我有一个产品列表和购物车，用于存储产品，当我将产品添加到购物车(localStorage)时，产品计数必须异步刷新，但它仅在刷新页面时刷新(这是关于goodsInCart)。也许需要添加EventListener？请告诉我哪里错了。

产品.html

<div ng-controller="ProductController">
    <div class="container">
        <h1 class="page-header">Product List</h1>
         <div class="small-cart">
            <a href="#!/cart">
              <span class="amount">{{goodsInCart}}</span>
              <img class="cart" src="./images/cart_2.png">
            </a>
          </div>
         <div class="row">
            <div class="item col-sm-6 col-md-4 col-lg-3" ng-repeat="product in products">
                <h3>{{product.title}}</h3>
                <img class="product-photo" src="{{product.photoURL}}" alt="">
                <p>{{product.price}} UAH</p>
                <button class="btn btn-cart" ng-click="addToCart(product)">Add to cart</button>
            </div> 
        </div>
     </div>
</div>

ProductService.js

testApp.factory('CartProduct', function(localStorageService) {
  var cartProducts = [];
  var goodsInCart = 0;

  function init() {
    checkCartChanged();
    if (localStorageService.get('cart-products')!=null) {
      cartProducts = localStorageService.get('cart-products');
      calcGoodsInCart();
    }
  }

  init();

  function getAll() {
    return cartProducts;
  }

  function addToCart(product) {
      cartProducts.push({product : product,amount : 1});
      refresh();
    }

  function store(key,value) {
     localStorageService.set(key, value);
  }

  function calcGoodsInCart() {
     var temp = 0;
     temp = cartProducts.length;
     goodsInCart = temp;
     return goodsInCart;
  }

  function getStorageItem(key) {
    for (var i = 0; i < localStorageService.length(); i++) {
        return localStorageService.get(key);
    }
    return null;
  }


  function checkCartChanged() {
    const storedGoods = getStorageItem('goods');
    cartProducts = storedGoods ? storedGoods : [];
    calcGoodsInCart();
  }  

  function refresh () {
    store("goods",cartProducts);
    calcGoodsInCart();
  }

  function deleteAllProducts() {
    this.localStorageService.clear('goods');
  }

  function findCartItem(product){
    for(let i =0; i < cartProducts.length;i++){
      if (product.id == cartProducts[i].product.id) {
        return i;
      }
    return -1;
    }
  }

  function deleteProduct(product){
    let index = findCartItem(product);
    if (index < 0) {
      return;
    }
    cartProducts.splice(index, 1);
    refresh();
  }

  function deleteAllProducts() {
    localStorageService.clear('goods');
  }

  return {
    addToCart: addToCart,
    getAll: getAll,
    calcGoodsInCart:calcGoodsInCart,
    getStorageItem:getStorageItem,
    deleteProduct:deleteProduct,

    goodsInCart:goodsInCart
  };
});

ProductController.js

testApp.controller('ProductController',function ProductController($scope,$http,CartProduct) {
    $scope.products = [
       { id:1, title: 'Margarita', photoURL:'...',price:260},
       { id:2, title: 'Margarita', photoURL:'...', price:240},
       { id:3, title: 'Margarita', photoURL:'...', price:200},
       { id:4, title: 'Margarita', photoURL:'...', price:190}
    ]; 

    $scope.addToCart = function (product) {
        CartProduct.addToCart(product);
    }

    $scope.goodsInCart = CartProduct.goodsInCart;

});

Answer 1

您的方法有两个问题，第一个是您仅在 Controller 中的行 $scope.goodsInCart = CartProduct.goodsInCart 中保存 goodsInCart 的第一个值;.

第二个是您仅公开值而不是引用。

解决方案是将 goodsInCart 包装在一个对象内并提供其引用。

testApp.factory('CartProduct', function(localStorageService) {
  var cartProducts = [];
  var sharedObj = {
    goodsInCart: 0
  }

  ...

  function calcGoodsInCart() {
    var temp = 0;
    temp = cartProducts.length;
    sharedObj.goodsInCart = temp;
    return temp;
  }

  ...

  return {
    addToCart: addToCart,
    getAll: getAll,
    calcGoodsInCart:calcGoodsInCart,
    getStorageItem:getStorageItem,
    deleteProduct:deleteProduct,

    sharedObj:sharedObj
  };

注意:尝试共享对象时要小心，如果您更改工厂内 sharedObj 的引用，任何使用它的 Controller 都将丢失该引用。这就是为什么您应该只修改共享对象的属性。

然后您可以在 Controller 中使用提供的对象，如下所示:

$scope.sharedObj = CartProduct.sharedObj;

希望对你有帮助!