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

Question

I have an AngularJS application (1.4.10) and I need to share some data between two controllers.

So I made my factory:

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

I insert the data in the first controller:

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

And I try to get the data in another controller, like this:

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

The console.log output this:

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

If I try the same get_data() function in the same controller where I call the save_data() function I have the correct results.

What am I missing?

Answer 1

Change Factory Like this

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

And in controllers

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

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

Answer 2

This sounds like it could be a timing issue. Data from a service like this isn't reactive. Here's a snippet that should help visualize it.

 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

Ok I solved the problem. Basically before I was using this code for the redirect to the new page:

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

And now I switched to this code:

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

And it's working.

The only thing is that when it wasn't working when I redirect the page the console in the chrome inspector refresh for every reloading, now the console do not refresh. Can someone tell me the difference between those two functions?