使用 AngularJS 服务共享数据答案

【问题标题】：Sharing data using an AngularJS Service使用 AngularJS 服务共享数据
【发布时间】：2014-11-07 05:39:54
【问题描述】：

为什么http://plnkr.co/edit/sjmRT8XOCYPW3ntEnN3N?p=preview 有效而http://plnkr.co/edit/Tkizktj0kx3OQmAkSH6U?p=preview 无效。

唯一的区别是 Cart.js cartContent.push(product); VS cartContent = [{name: "Keyboard"}]; 中的like

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

我想完全改写对象cartContent 并让它仍然可用于cartBoxCtrl 和productListCtrl

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat web-deployment angularjs-service

【解决方案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 上使用唯一属性），以便跟踪列表而不是 angular 创建的唯一键$$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

【讨论】：

你回答的第二部分正是我所需要的 :) 谢谢！
@michaelcurry 哦，不需要解释吗？ :P
哦，是 :P 这让我解释了我在做什么。谢谢。 [过去 2 天从零开始学习 Angular]