【问题标题】: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 并让它仍然可用于cartBoxCtrlproductListCtrl

【问题讨论】:

    标签: 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]
    猜你喜欢
    • 2013-02-25
    • 1970-01-01
    • 2018-07-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-06
    • 2017-02-21
    • 1970-01-01
    相关资源
    最近更新 更多