使用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"}];

我能看到的唯一区别是Angular对象（创建后有一个）$$hashKey键。。。

我想完全重写对象cartContent，并使其仍然可用于cartBoxCtrl和productListCtrl

Answer 1

这是因为在第二种情况下，您正在覆盖被设置为对$scope.cart的引用的cartContent，因此当您覆盖内容时，对cart所做的任何更改都不会反映在范围中，因为$scope.cart仍然指向旧的引用。因此，在您的控制器中，将$scope.cart设置为Cart服务，并在ng repeat中访问cartContent，这样scope.cart现在就可以引用Cart对象本身，对其属性所做的任何更改也将反映在作用域的属性中。

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

和

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

还要注意track by的用法（这里我使用了$index，相反，你可以在对象ex:-product.id上使用一个唯一属性），这样列表将由它来跟踪，而不是由角度创建的唯一密钥$$haskkey

Plnkr

或者，如果你想清理cartContent，并且仍然在$scope.cart中保留cartContext作为参考，那么你可以这样做：-

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

Plnkr