在两个不同页面中使用 Angular 控制器的值

Question

我有两个不同的页面。让他们的名字是product.php 和buy.php. 我有一个controllerProduct 用于product.php 和controllerBuy 用于buy.php。

用户加载product.php 并选择购买价格为 59 美元的产品。当他或她选择产品时，$scope.setPrice(); 函数在controllerProduct 中运行。 setPrice 函数如下：

window.ngApp = angular.module('myApp', []);
window.ngApp.controller('controllerProduct', ['$scope',
     function ($scope) {
          $scope.price = null //default
          $scope.setPrice = function(){
               $scope.price = 59;
          }; 
}]); 

现在他或她选择了价格为 59 美元的产品，最后点击了购买按钮，buy.php 页面将被加载。

在buy.php 我想向用户展示这样的内容：

“嘿用户，你要买这个产品！它的价格是{{price}}$”。

如何在 controllerBuy 中使用来自 controllerProduct 的 price 变量？

Answer 1

每次您想在控制器之间共享逻辑时，这都是服务的完美场景。

一般的方法可能是这样的

 //singleton to share logic between controllers
.service('ShareService', function(){
 var _price = null;
 this.setPrice = function(price){
   _price = price; 
 }
 this.getPrice = function(){
   return _price;
 }
})

 //first controller
.controller('controllerProduct', function($scope, ShareService){
  $scope.setPrice = function(price){
    $scope.price = price;
    ShareService.setPrice(price);
  }; 
})

//second controller
.controller('controllerBuy', function($scope, ShareService){
  //watch changes of the price
  $scope.$watch(function(){
    return ShareService.getPrice()
  }, function(newVal){
    $scope.selectedPrice = newVal;
  })
})