Javascript AngularJS在控制器之间共享异步数据

有相当多的主题涉及控制器之间共享数据的问题，但我还没有找到任何适合我的案例的好答案

我有一个使用promise异步获取数据的控制器。然后，控制器制作一份数据副本，以便在该范围内使用。然后我有一个第二个控制器，我还想在第一个控制器的相同数据副本上工作，以便它们都共享它

下面是一些经过简化的代码作为示例：

.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提供不同的对象，并且不会更改为正确的对象。我知道你可以通过广播和观看解决这个问题，但如果可能的话，我会尽量避免使用它。

重构你的工厂，检查是否已经设置了

\u 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!
})

---

重构工厂以检查是否已设置了

\u 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!
})

---

我会这样解决：

.controller('firstController', function ($scope, $rootScope, 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);
        $rootScope.$broadcast('myData:updated');
    }
});



.controller('secondController', function ($scope, $rootScope, someService){
        var vm = this;
        $rootScope.$on('myData:updated', function(event, data) {
           vm.data = someService.getCurrentData(); 
        });
});

---

我会这样解决：

.controller('firstController', function ($scope, $rootScope, 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);
        $rootScope.$broadcast('myData:updated');
    }
});



.controller('secondController', function ($scope, $rootScope, someService){
        var vm = this;
        $rootScope.$on('myData:updated', function(event, data) {
           vm.data = someService.getCurrentData(); 
        });
});

---

您应该为getCurrentData（）保留异步API，如果未设置_currentData，则getCurrentData（）应调用getData（）。您应该为getCurrentData（）保留异步API，如果未设置_currentData，则getCurrentData（）应调用getData（）。不错，但我不喜欢getData中的回调函数。getData返回一个承诺不是更好吗？很好，但我不喜欢getData中的回调函数。getData返回一个承诺不是更好吗？