javascript - AngularJS 在不同模块之间共享 Controller 中存储的数据

Question

我对 AngularJS(版本 1.6.9)完全陌生，几天来我一直在尝试解决这个问题。

所以，我一直试图实现的是一个购物车网站，您可以在其中选择您想购买的商品，单击结帐，然后进入结帐页面，您可以在其中查看购物车中的商品和总价。问题是，当用户单击结帐并加载结帐页面时，应显示他们选择的产品及其总价格。我将所有这些信息存储在购物车模块的 Controller 中，但问题是如何从结账模块的 Controller 访问这些信息。我尝试创建一个服务，将信息存储在那里，然后将其注入(inject)结账 Controller ，但我无法正确地将信息从我的 Controller 存储到服务。

'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

首先，你不应该在两个模块中都注入(inject) ngRoute，而应该将它放在主模块中。

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

第二，只需将第二个模块作为依赖项注入(inject)到第一个模块中，在此处添加 checkout

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