javascript - AngularJS 在 Controller 之间共享异步数据

Question

那里有很多主题涉及在 Controller 之间共享数据的问题，但我还没有为我的案例找到任何好的答案。

我有一个使用 promise 异步获取数据的 Controller 。然后 Controller 制作数据的副本以在该范围内使用。然后我有第二个 Controller ，我也想处理与第一个 Controller 相同的数据副本，以便它们共享它。

这里有一些简化的代码作为示例:

.controller('firstController', function ($scope, someService){
    var vm = this;
    someService.getData().then(function(data) {
        angular.copy(data, vm.data); //creates a copy and places it on scope
        someService.setCurrentData(vm.data)
    }
});

.controller('secondController', function ($scope, someService){
    var vm = this;
    vm.data = someService.getCurrentData(); //Triggers before the setter in firstController
});

.factory('someService', function(fetchService){
    var _currentData = {};

    var getData = function(){
        return fetchService.fetchData().then(function(data) { return data; });
    };

    var getCurrentData = function(){
        return _currentData;
    }

    var setCurrentData = function(data){
        _currentData = data;
    }
});

由于 getData 是异步的，setCurrentData 会在 getCurrentData 之后被触发，所以 getCurrentData 给出了一个不同的对象，并且不会更改为正确的对象。我知道你可以通过广播和观看来解决这个问题，但我尽量避免使用它。

Answer 1

重构您的工厂以检查是否已设置 _currentData 变量 - 然后您可以简单地使用回调:

app.factory('someService', function(fetchService){
    var _currentData = null;

    var setCurrentData = function(data){
        _currentData = data;
    }

    var getData = function(callback) {
        if (_currentData == null) {
            fetchService.fetchData().success(function(data) { 
                setCurrentData(data);
                callback(data); 
            });
        } else {
            callback(_currentData);
        }
    };

    /*
    var getCurrentData = function(){
        return _currentData;
    }
    */
});

现在，调用您的 getData 服务将检查数据是否已经获取并存储，如果是，则使用它，否则去获取它!

someService.getData(function(data) {
    console.log(data); //yay for persistence!
})