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

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页面。

在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;
  })
})