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的用法（这里我使用了$ 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

使用AngularJS服务共享数据

1 个答案: