自定义指令控制器数据与工厂数据同步

customized directive controller data sync with factory data

本文关键字：数据 同步 工厂 自定义 指令控制器      更新时间：2023-09-26

我是angularjs的新手。我在某个地方发现了下面的例子，它运行良好。然而，我不明白定制指令控制器中的数据是如何与工厂数据同步的。这是代码：

angular.module("cart",[]).factory("cart", function(){
   var cartData = [];
   return{
     addProduct:function(id, name, price){
       cartData.push({count:1, id:id, price:price, name:name})
     },
     getProduct: function(){
       return cartData;
     }
   };
}).directive("cartSummary", function(cart){
    return{
      restrict: "E",
      template:"cartSummary.html",
      controller: function($scope){
        var cartData = cart.getProduct();
        $scope.totalPrice = function(){
          var total = 0;
          for(var i=0; i<=cartData.length; i++){
            total+= (cartData[i].price * cartData[i] * count);
          }
        }
      }
    }
});

在另一个模块中，我有以下代码来更新cartData:

angular.module("store", ["cart"]).controller("storeCtrl", function($scope, cart){
  /*some logic here*/
  $scope.addToCart = function(){
    cart.addProduct(product.id, product.name, product.price);
  }
});

以下是视图：

<html ng-app="store">
   <body ng-controller="storeCtrl">
     <!--some html-->
     <cart-summary/>
     <!--some html-->
     <button ng-click="addToCart(item)">Add To Cart</button>
   </body>
</html>

指令模板：

 <div class="navbar-text">
    {{totalPrice()}}
 </div>

我知道每次用户点击"添加到购物车"按钮时，工厂中的cartData都会更新，但我不明白工厂中的cartData总是与定制指令控制器中的数据同步这一事实背后的魔力。函数$scope.totalprice（）是如何每次都被调用的？

有人能向我解释一下吗？非常感谢！

它实际上非常简单。在javascript中，我们使用的所有对象、数组和函数实际上都是通过引用使用的，而其他数据类型则是通过值使用的。

调用getter来获取对象的引用并不重要，重要的是它实际上是一个引用，而不是对象本身，所以当你添加一个新项时，你就是在将它添加到唯一的数据源中。

试试这个，在你的指令中，把这个代码放在一个新的方法中，并用$scope.cartData作为你在视图中使用的引用来执行它：

$scope.cartData = {}; //you are destroying the reference but not the real object
$scope.cartData = cart.cartData; //you will get all your items back on play as it refreshes the reference with the original one

在｛｛totalPrice（）｝｝的情况下，所有东西都会发生变化，这里angular不知道totalPrice函数的结果是否会在两个不同的摘要周期之间发生变化，因此框架必须在每个周期重新执行该函数进行检查。

为了不让应用程序表现不佳，应该避免这种插值，因为它们被认为是一种糟糕的做法，特别是当函数内部有大量逻辑时。解决这种问题的方法是预先计算函数的结果，并将其分配给范围内的一个新属性，并且使插值侦听该属性而不是执行函数。

希望这个解释能有所帮助！

干杯！

相关文章：