AngularJS 在不同模块之间共享存储在控制器中的数据

Question

我对 AngularJS（1.6.9 版）完全陌生，我已经尝试了几天。

所以，我一直在努力实现的是一个购物车网站，您可以在其中选择要购买的商品，点击结帐，然后进入结帐页面，您可以在其中查看购物车中的物品和总价.问题是当用户点击结帐并加载结帐页面时，应该显示他们选择的产品和它们的总价格。我将所有这些信息都存储在购物车模块的控制器中，但问题是如何从结帐模块的控制器中访问这些信息。我已尝试创建服务，将信息存储在那里，然后将其注入结帐控制器，但我无法将信息从控制器正确存储到服务。

'use strict';

//define CART module
angular.module('cart', ['ngRoute'])
//configuration for CART module
.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/cart', {
    templateUrl: '/public/cart/cart.html',
    controller: 'cartCtrl as vm'
  });
}])
.controller('cartCtrl', function(){
  this.chocolate =[
    {
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      pack: '10',
      price: 10,
      checkState: false
    }
  ]
  this.honey = [
    {
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      pack: '10',
      price: 10,
      checkState: false
    }
  ]
  this.candy = [
    {
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      pack: '10',
      price: 10,
      checkState: false
    }
  ]

  this.totalCost = 0;
  this.calculateTotal = function (checked, price) {
    if (checked) {
      this.totalCost += price;
    } else {
      this.totalCost -= price;
    }
  }

});

'use strict';

angular.module('checkout', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/checkout', {
    templateUrl: 'public/checkout/checkout.html',
    controller: 'checkoutCtrl'
  });
}])
.controller('checkoutCtrl', ['$scope', function($scope){

}]);

Answer 1

首先你不应该在两个模块中都注入 ngRoute，只需要在主模块中。

angular.module('checkout', ['ngRoute']) //remove ngRoute from here

其次，只需将第二个模块作为依赖注入到第一个模块中，这里添加checkout

angular.module('cart', ['ngRoute','checkout'])