1

我试图将数据从一个控制器发送到另一个控制器，但没有成功。我已经尝试了使用 Angular 服务在 Stack Overflow 上找到的所有想法，但我看不出我的代码有什么问题。

我有一个列出一些项目的第一个控制器（CartSidebarCtrl）。它还具有从列表中删除项目的能力。

我有另一个控制器应该显示项目数（TopCartCtrl）。

在页面加载时，第二个控制器显示正确数量的项目。但是当我删除第一个控制器中的一些项目时，第二个没有更新。

我在这里做错了什么？

HTML 代码：

<div ng-controller="CartSidebarCtrl">
    <ul>
        <li ng-repeat="product in products">
            {{product.name}} (<span style="color: blue; cursor: pointer" ng-click="remove($index)">Remove</span>)
        </li>
    </ul>
</div>

<div ng-controller="TopCartCtrl">
    <span>{{topCartText}}</span>
</div>

角代码：

magentoApp.factory('cartModel', function () {
    var cartModel = {};

    cartModel.updateProducts = function(products) {
        cartModel.products = products;
    };

    return cartModel;
});

magentoApp.controller('CartSidebarCtrl', ['$scope', '$http', 'cartModel', function($scope, $http, cartModel) {
    $scope.products = [
        { name: 'Product 1' },
        { name: 'Product 2' }
    ];

    $scope.remove = function($index) {
        $scope.products.splice($index, 1);
        updateTopCart();
    }

    updateTopCart = function() {
        cartModel.updateProducts($scope.products);
    }

    updateTopCart();
}]);

magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
    $scope.topCartText = cartModel.products.length;
}]);

[使用更新的代码进行编辑]

除了“m59”和“Jesus Rodriguez”提到的对象引用不正确这一事实之外，我还在cartModel.products 上要求.length。出于同样的原因，我的模板没有更新。然后我的解决方案是将产品对象传递给模板并在此模板上调用 .length 。然后，我想根据 products.length 显示不同的文本，并通过创建自定义过滤器来完成这项工作。

这是正确的代码。

HTML：

<div ng-controller="TopCartCtrl">
    <span>{{products.length | topCartFilter}}</span>
</div>

<div ng-controller="CartSidebarCtrl">
    <ul>
        <li ng-repeat="product in products">
            {{product.name}} (<span style="color: blue; cursor: pointer" ng-click="remove($index)">Remove</span>)
        </li>
    </ul>
</div>

角度：

magentoApp.factory('cartModel', function() {
    var cartModel = {
        products: [
            { name: 'Product 1' },
            { name: 'Product 2' }
        ]
    };
    return cartModel;
});

magentoApp.filter('topCartFilter', function() {
    return function(productsCount) {
        return (productsCount > 0) ? 'You have ' + productsCount + ' items in your cart': 'Your cart is empty';
    };
});

magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
    $scope.products = cartModel.products;
}]);

magentoApp.controller('CartSidebarCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
    $scope.products = cartModel.products;

    $scope.remove = function($index) {
        $scope.products.splice($index, 1);
    }
}]);
4

1 回答 1

1

我只记得我已经在这里回答了这个问题：How to share data between controllers in angularjs

var app = angular.module('myApp', []);

app.factory('myService', function() {
  var myService = {
    foo: 'bar'
  };
  return myService;
});

app.controller('myCtrl1', function(myService) {
  console.log(myService.foo);
  myService.foo = 'not bar anymore!';
});

app.controller('myCtrl2', function(myService) {
  console.log(myService.foo);
});

您唯一需要做的就是设置您的$scope.cartModel = cartModel，然后您可以执行类似的操作ng-model="cartModel.someProp"，并且任何更改都会更新您的服务中的该属性，从而将其更新$scope.cartModel为引用服务对象的任何内容。

于 2013-09-07T00:04:28.970 回答