定製指令控制器數據與工廠數據同步

我是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

定製指令控制器數據與工廠數據同步

回答

相關問題