javascript - 在 AngularJS Controller 之间共享数据，但共享数据来自 Ajax 调用

Question

在下面这个人为设计的示例中，我已经弄清楚了如何使用共享服务在两个 AngularJS Controller 之间共享数据:

(功能fiddle)

var app = angular.module('myApp', []);

app.factory('UserData', function() {
    var data = {foo: 'bar'};

    return {
        getData: function() {
            console.log('getData');
            return data;
        },
        setData: function(newData) {
            data = newData;
        }
    };
});

function MainCtrl($scope, UserData) {
    console.log('MainCtrl');
    console.log(UserData.getData());
}
MainCtrl.$inject = ['$scope', 'UserData'];

function JobListCtrl($scope, UserData) {
    console.log('JobListCtrl');
    console.log(UserData.getData());
}
JobListCtrl.$inject = ['$scope', 'UserData'];

我的问题是我希望 UserData 中保存的数据来自 Ajax 调用(可能使用 $http)。

我尝试在 UserData 工厂函数中执行 Ajax 调用，但由于它是异步运行的，因此 MainCtrl 和 JobListCtrl 在 UserData服务实际上有任何数据在里面。

有人可以指导我如何设置吗？

Answer 1

我创建了这个示例，展示了如何在不同 Controller 之间获取、存储和共享数据(模型)，而不会失去其可绑定(bind)功能。

实例: http://pablodenadai.github.io/SharingModelsAngularJS/

源代码 1:(资源和模型抽象)https://github.com/pablodenadai/SharingModelsAngularJS/blob/master/app/scripts/controllers/main.js

repo : https://github.com/pablodenadai/SharingModelsAngularJS

希望对您有所帮助。