AngularJS工厂，用于在控制器之间共享数据

Question

我有一个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（）函数，则结果正确。

我想念什么？

Answer 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();
});

Answer 2

听起来这可能是时间问题。 这样的服务中的数据不是被动的。 这是一个有助于可视化的代码段。

 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> 

Answer 3

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

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

现在我切换到以下代码：

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

它正在工作。

唯一的事情是，当我重定向页面时，如果铬笔检查器中的控制台在每次重新加载时都无法刷新，则该控制台无法正常工作。 有人可以告诉我这两个功能之间的区别吗？