Question

我正在尝试将数据从一个控制器发送到另一个控制器而没有成功。我已经尝试了使用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>

Angular Code：

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。出于同样的原因，我的模板没有更新。然后我的解决方案是将products对象传递给模板并在此模板上调用.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);
    }
}]);

Answer 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 1}}引用服务对象。

控制器不通过Angular JS中的服务相互通信

1 个答案: