用于在控制器之间共享数据的 AngularJS 工厂答案

【问题标题】：AngularJS factory for sharing data between controllers用于在控制器之间共享数据的 AngularJS 工厂
【发布时间】：2016-07-07 13:56:17
【问题描述】：

我有一个 AngularJS 应用程序 (1.4.10)，我需要在两个控制器之间共享一些数据。

所以我做了我的工厂：

.factory('CardsForService', function($http, URL){
    var service = {
        "block_id": '',
        "service_id": ''
    };

    service.save_data = function(block_id, service_id){
        service.block_id = block_id;
        service.service_id = service_id;
    };

    service.get_data = function(){
        return service;
    };

    return service;
})

我在第一个控制器中插入数据：

$scope.open = function(id, type){
    console.log(id +" "+type);
    CardsForService.save_data(id, type);
    ...

我尝试在另一个控制器中获取数据，如下所示：

$scope.$on('$routeChangeSuccess', function() {
    if  (algo_to_used == "service"){
        var data = CardsForService.get_data();
        console.log(data);
    } else {
    }
});

console.log 输出如下：

Object {block_id: "", service_id: ""}

如果我在调用 save_data() 函数的同一个控制器中尝试相同的 get_data() 函数，我会得到正确的结果。

我错过了什么？

【问题讨论】：

我用你的代码创建了一个快速的 plunk (plnkr.co/edit/ariglr58rS21918yQc26?p=preview)，它与 2 个控制器和服务之间的交互相关，它工作得很好。您的问题可能在您没有向我们展示的代码中的某个地方。您确定将 CardsForService 注入到两个控制器中吗？

标签： javascript angularjs controller

【解决方案1】：

像这样改变工厂

app.factory('CardsForService', function(){
var service = {
    "block_id": '',
    "service_id": ''
};

var save_data = function(block_id, service_id){
    service.block_id = block_id;
    service.service_id = service_id;
};

var get_data = function(){
    return service;
};

return{
   saveData:save_data,
   getData:get_data
}});

在控制器中

app.controller('FirstCtrl',function(CardsForService){
    CardsForService.setData(id, type);
});

app.controller('SecondCtrl', function($scope, CardsForService){
    $scope.data = CardsForService.getData();
});

【讨论】：

这一行：app.controller('SecondCtrl', function($scope.CardsForService){ throws and error (module not avaible) 没有那行我有和以前一样的问题..！
是的，对不起，我用分号代替了点

【解决方案2】：

这听起来可能是时间问题。来自此类服务的数据不是被动的。这是一个有助于将其可视化的 sn-p。

var app = angular.module("demo", []);

app.factory("MySvc", function() {
  var data = {};
  data.setData = function(key, value) {
    this[key] = value;
  }
  data.getData = function(key, def) {
    return key in this ? this[key] : def;
  };
  return data;
});

app.controller("test1", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(100).then(function() {
      MySvc.setData("foo", "bar");
      $scope.data = MySvc.getData("foo");
    });
  }
]);

app.controller("test2", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(500).then(function() {
      $scope.data = MySvc.getData("foo", "baz");
    });
  }
]);

app.controller("test3", ["$scope", "MySvc",
  function($scope, MySvc) {
    $scope.data = MySvc.getData("foo", "asdf");
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js "></script>

<div ng-app="demo">
  <pre ng-controller="test1">Test 1: {{ data }}</pre>
  <pre ng-controller="test2">Test 2: {{ data }}</pre>
  <pre ng-controller="test3">Test 3: {{ data }}</pre>
</div>

【讨论】：

第二个控制器在一个新页面，所以浏览器需要加载它...我认为工厂仍然比页面加载更快！

【解决方案3】：

好的，我解决了这个问题。基本上在我使用此代码重定向到新页面之前：

$window.location.assign('/cards/service');

现在我切换到这段代码：

$location.path('/cards/service');

它正在工作。

唯一的问题是，当我重定向页面时它不起作用时，chrome 检查器中的控制台会在每次重新加载时刷新，现在控制台不会刷新。谁能告诉我这两个函数的区别？

【讨论】：