使用AngularJS服務共享數據

Question

爲什麼http://plnkr.co/edit/sjmRT8XOCYPW3ntEnN3N?p=preview工作和http://plnkr.co/edit/Tkizktj0kx3OQmAkSH6U?p=preview不是。

唯一的區別是在Cart.js cartContent.push(product); VS等等cartContent = [{name: "Keyboard"}];

，我可以看到的是角對象的唯一差別（在被創建後有一個）$$hashKey關鍵...

我想以完全覆蓋對象cartContent並且仍然可用於cartBoxCtrl和productListCtrl

Answer 1

這是因爲在第二種情況下，您覆蓋設置爲參考的cartContent因此，在覆蓋內容時，對cart所做的任何更改都不會反映到範圍中，因爲$ scope.cart仍指向舊引用。因此，在您的控制器中，將$scope.cart設置爲Cart服務和訪問cartContent，以便scope.cart現在具有對Cart對象本身的引用，並且對其屬性所做的任何更改也將反映在該範圍的屬性中。

controller('cartBoxCtrl', function ($scope, Cart){ 
    $scope.cart = Cart; //<-- here 
}); 

和

<li ng-repeat="product in cart.cartContent track by $index"> 

還要注意軌道通過使用（這裏我用$指數，而不是你可以使用該對象的前一個獨特的屬性： - product.id），這樣名單將由被跟蹤，而不是角創建唯一密鑰$$haskkey

Plnkr

或者，如果你想清理cartContent，仍然保持cartContent作爲參考在$scope.cart那麼你可以做： -

this.addProduct = function (product) { 
    //Cleanup the current array and insert new item 
    this.cartContent.splice(0, this.cartContent.length, product); 

}; 

Plnkr