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

我是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（）如何被调用？

有人可以向我解释这个吗？非常感谢！

来源

2014-08-29 Ryan.Gao

其实很简单。在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（）}}一切这里角度并不知道totalPrice函数的结果是否可以在两个不同的摘要循环之间变化，所以框架必须在每个循环中重新执行函数来检查。

为了不使应用程序表现不佳，应该避免这种插值的，因为他们被认为是不好的做法，特别是如果该函数有它内部的重逻辑。解决这个问题的方法是预先计算函数的结果并将其分配给作用域内的新属性，并使内插监听该属性而不是执行函数。

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

干杯！

来源

2014-08-29 01:13:13 HeberLZ

OMG，多数民众赞成在正确的！非常感谢！ – 2014-08-29 01:24:38

现在我很困惑模板视图中的totalPrice（）每次如何被调用。你能解释一下吗？非常感谢你 – 2014-08-29 16:48:29

实际上，它确实会产生内存泄漏，因为它的摘要循环中的角度比较它的变量值和它们在此之前的摘要循环中的先前值。得到这个的简单方法是角度不知道函数是否改变了结果，所以在每个摘要循环中角将会一次又一次地执行它。在插值{{}}内调用函数被认为是不好的做法，特别是重逻辑函数。相反，预先计算结果并将其绑定到范围的属性 – HeberLZ 2014-08-30 06:20:44

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

回答

相关问题