Question

我从这个简单的plunkr

开始

据我所知，它仅使用一个组件。我有一个使用多个组件的项目。我有一个购物车，用户单击“添加”按钮将商品添加到所述购物车。结帐组件只是清空购物车。我希望当购物车为空时，显示屏也将为空，并且总计将显示0.00，但这没有发生。据我所知，HTML仅改变页面加载而不改变数据加载，这就是问题所在，但是据我了解，角度将自行解决此问题。

预先感谢

相关代码：

app.config.js（此文件具有出厂和检出功能）

'use strict';

angular.
  module('floorForceApp').
  config(['$routeProvider', '$provide',
    function config($routeProvider,$provide) {
      $routeProvider.
        when('/home', {
          template: '<home-page></home-page>'
        }).
        when('/floors', {
          template: '<floor-page></floor-page>'
        }).
        when('/cabinets', {
          template: '<cabinet-page></cabinet-page>'
        }).
        when('/walls', {
          template: '<wall-page></wall-page>'
        }).
        when('/checkout', {
          template: '<checkout-page></checkout-page>'
        }).
        otherwise('/home');

        
    
    },
  ]).factory('floorForceCart',function(){
    let total = 0;
    let addedItems = [];
    // let additem = function(item,price){
      
    // }

    return{
      addItems:function(item,count){
        let exist =false;

        $.each(addedItems,function(i,v){
          if(v.itemNo === item.itemNo){
            exist = true;
            v.count = v.count + count;
            total = total + (item.itemPrice*count);
          }
        });

        if(!exist){
          let toPush = {};
          toPush.itemNo = item.itemNo;
          toPush.count = count;
          toPush.itemName = item.itemName;
          toPush.itemPrice = item.itemPrice;
          addedItems.push(toPush);
          total = total + (item.itemPrice*count);
        }

        console.log("Cart:",addedItems);
        console.log("Total:",total);
      },
      removeItems: function(item,count){
        $.each(addedItems,function(i,v){
          if(v.itemNo === item.itemNo){
            v.count = v.count - count;
            total = total - (item.itemPrice * count);
            if(v.count == 0){
              addedItems.splice(i,0);
            }
          }
        });
      },
      getTotal:function(){
        return total;
      },
      getCart:function(){
        return addedItems;
      },
      checkout:function(){
        total = 0;
        addedItems = [];
        
        console.log("Check out successful.");
        console.log("Total:",total,"Cart:",addedItems);
        alert("Checkout Successful!");
      }
    };
  });

checkout-page.component.js（数据从工厂加载到此处）

'use strict';

angular.
    module('checkoutPage').
    component('checkoutPage',{
        templateUrl: 'checkout-page/checkout-page.template.html',
        controller: function checkOutController($scope,$http,floorForceCart){
            let self = this;
            $scope.total = floorForceCart.getTotal();
            $scope.cart = floorForceCart.getCart();


            $scope.checkOut = function(){
                floorForceCart.checkout();
            }
        }
    })

checkout-page.html（此页面显示结帐）

<div>
    <div style="height:30em;">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-sm-4 h-100 ">
                    <div class="row prodImage h-100"></div>
                </div>
                <div class="col-sm-8 h-100 ">
                    <div class="row h-100">
                        <div class="checkOutTitleDiv titleDiv">Checkout</div>
                        <div class="checkOutCartDiv paddingZero">
                            <div ng-repeat="item in cart" class="row marginAuto cartItemRow">
                                <div class="itemNameDiv col-sm-5">{{item.itemName}}</div>
                                <div class="itemPriceDiv col-sm-3">{{item.itemPrice|currency}}</div>
                                <div class="itemQuantityDiv col-sm-4">
                                    <div class="row">
                                        <div class="col-sm-4"></div>
                                        <div class="col-sm-4 itemQuantity">{{item.count}}</div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="checkOutButtonDiv paddingZero">
                            <div class="row h-100 marginAuto">
                                <div class="col-sm-4 cartTotalDiv">
                                    <div class="">Total:{{total|currency}}</div>
                                </div>
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <input class="checkOutButton btn btn-success" ng-click="checkOut()" type="button"value="Check Out"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这是因为在控制器中，您在$ scope中添加了一个属性，该属性引用工厂中 addedItems 变量所引用的同一项目数组：

$scope.total = floorForceCart.getTotal();
$scope.cart = floorForceCart.getCart();

然后，当您从工厂调用结帐时，您将工厂的 addedItems 变量重新分配给新数组，并为< strong>总计变量。问题在于属性$ scope.total和$ scope.cart没有任何了解这一点的方法。 $ scope.cart仍将指向带有项的旧数组。

您可以通过以下任一方法解决此问题：

将$ scope.checkOut更改为

$scope.checkOut = function(){
   floorForceCart.checkout();
   // And refresh your $scope
   $scope.total = floorForceCart.getTotal();
   $scope.cart = floorForceCart.getCart();
}

或者通过在工厂中将其清除，而不是为工厂中的addedItems分配新的数组。

addedItems.length = 0;

如果采用最后一种方法，则仍然必须执行$ scope.total = floorForceCart.getTotal（）;。在floorForceCart.checkout（）之后；更新您的$ scope中的总数。

AngularJS HTML不会随着工厂数据的更改而更新

1 个答案: