javascript - 使用AngularJS服务共享数据

为什么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

最佳答案

这是因为在第二种情况下，您将覆盖设置为对$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并仍将cartContent保留为$scope.cart中的引用，则可以执行以下操作：

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

};

Plnkr

关于javascript - 使用AngularJS服务共享数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25818507/