Angularjs 在服务从URL检索数据后，将数据存储到作用域中的正确方法是什么？

我有一个FirstController，它在页面加载时加载。当用户单击其上的按钮时，它会触发ng开关，该开关加载第二个控制器，该控制器负责管理使用$scope.data1、$scope.data2、$scope.data3中数据的3个图形的内容。当SecondController加载时，它初始化检索数据的服务。我的问题在我当前的设置中

myApp.controller('SecondController', ['DataService', function(DataService) {

    DataService.getMyData(); // this starts a call to a service method that contains an $http call that gets the data. I don't want the DataService to be getting the data until SecondController is loaded.

    $scope.myData1 = DataService.getAgeData(); // This fails now because the getMyData() call within the service has not completed when this is called.

    $scope.myData2 = DataService.getNameData(); // This fails now because the getMyData() call within the service has not completed when this is called.

    $scope.myData3 = DataService.getCountyData(); // This fails now because the getMyData() call within the service has not completed when this is called.
}]);

在HTML模板中，我有以下3次：

<chartdata data="myData1"></chartdata>

正确的方法是什么？代码示例会很有帮助

---

注意：getMyData（）将数据推送到“this.asyncData”变量中。方法“getAgeData、getNameData和getCountyData”都对这个.asyncData进行过滤/转换，因此这些函数中没有$http。

如果

DataService.getMyData（）

中有一个$http调用，那么它是异步的，并且在调用

DataService.getAgeData（）时不一定完成

如果您从$http调用返回承诺，那么在
getMyData（）
完成后，您可以执行接下来的三种方法

function getMyData() {
    return this.$http
        .get('....')
        .then(function (response) {
            //note that this return is an optional link in the promise chain,
            //and it could just be a void operation here
            return response.data;
        });
}

我只是再看一下您的控制器，如果我是您，我会将其更改为将所有3个设置为异步操作：

myApp.controller('SecondController', SecondController);

SecondController.$inject = ['DataService'];
function SecondController(DataService) {
    DataService.getAgeData().then(function (ageData) { $scope.myData1 = ageData; });
    DataService.getNameData().then(function (nameData) { $scope.myData2 = nameData; });
    DataService.getCountyData().then(function (countyData) { $scope.myData3 = countyData; });
}   

如果有机会，一定要查看John Papa的《风格指南》，以获得最佳实践，尤其是“controllerAs”语法：

根据您的评论进行更新：

function getMyData() {
    return this.$http
        .get('....')
        .then(function (response) {
            //note that this return is an optional link in the promise chain,
            //and it could just be a void operation here
            this.cachedData = response.data;
        });
}

-

回调、承诺和/或通过引用。你能给我一个这样做的理想方式的示例吗？希望不是非常无序和复杂？我正在寻找今天的最佳实践，而不是选项。我看到的不是最佳实践的示例将$http调用推到控制器中，我认为这不是正确的方式。PromISE不清楚，我使用服务内部的承诺，但不知道如何尽可能将其带回控制器。Downvoter应该给出一个原因。您遇到的问题是getMyData似乎是异步的，因此您应该等到承诺完成后才能从中访问数据。我想他知道问题所在是的，看到代码片段中的注释。我投了反对票，因为如果不从头开始构建服务，就无法回答此问题。这也有助于展示您解决此问题的尝试，这样我们就可以开始了。如果您问哪种技术最好，这与stackoverflow无关，应该关闭。DataService.getMyData（）是服务中唯一一个包含$http调用的方法。getAgeData和getNameData都是从“this.asyncdata”变量（带筛选和转换）获取数据的因此，无需在每次调用getAgeData、getNameData等时发出$http请求。在这种情况下，您可以将return response.data；替换为service.asyncData=response.data；。控制器调用变为DataService.getMyData（）。然后（函数（）{…执行三个赋值…}）；等等，但是如果这三个都在调用DataService.getMyData（），那么http调用会发生三次吗？getAgeData、getNameData和getCountyData（）各一次？如果getMyData中只有$http调用，那么它将完成该调用，然后继续执行分配。把它想象成一个英语句子：getMyData（）。然后（这样做{$scope.myData1=DataService.getAgeData（）；$scope.myData2=DataService.getNameData（）；$scope.myData3=DataService.getCountyData（）；}）；是否有某种方法可以使SecondController返回服务的“this.cachedData”或$http调用（如果尚未进行），而不是使用服务调用包装SecondController的内容？
myApp.controller('SecondController', SecondController);
SecondController.$inject = ['DataService'];
function SecondController(DataService) {
    DataService.getMyData().then(function () {
        $scope.ageData = DataService.getAgeData();
        $scope.nameData = DataService.getNameData();
        $scope.countyData = DataService.getCountyData();
    });
}