javascript - Angular Service 与 Controller 同步工作

Question

我对 AngularJS 相当陌生，刚刚开始掌握许多我特别喜欢 MVC 设计模式的概念。但我在应用程序中实现服务层时遇到了困难。

我发现，在我的 Controller 调用服务中的方法后，它会在服务返回数据之前继续执行代码；因此，当服务返回数据时，它对 Controller 没有任何用处。

为了更好地说明我所说的内容，下面是代码:

var InsightApp = angular.module('InsightApp', ['chart.js']);

// Module declaration with factory containing the service
InsightApp.factory("DataService", function ($http) {
return {
    GetChartSelections: function () {
            return $http.get('Home/GetSalesData')
                .then(function (result) {
                return result.data;
            });
        }
    };
});

InsightApp.controller("ChartSelectionController", GetAvailableCharts);

// 2nd Controller calls the Service
InsightApp.controller("DataController", function($scope, $http, DataService){
var response = DataService.GetChartSelections();

// This method is executed before the service returns the data 
function workWithData(response){
    // Do Something with Data
   }
}

我发现的所有示例似乎都是按照我这里的方式构建的，或者有一些细微的变化；所以我不确定我应该做什么来确保异步执行。

在 Javascript 世界中，我会将服务移至 Controller 内部以确保它执行异步；但我不知道如何在 Angular 中实现这一点。而且，无论如何这样做都会与 Angular 注入(inject)背道而驰。

那么正确的方法是什么？

Answer 1

http 返回一个 promise 而不是数据，因此在您的工厂中，您返回 $http promise ，并且可以像使用 then、catch、finally 方法的 promise 一样使用它。

参见:http://blog.ninja-squad.com/2015/05/28/angularjs-promises/

InsightApp.controller("DataController", function($scope, $http, DataService){

var response = DataService.GetChartSelections()
    .then(function(res) {
       // execute when you have the data
    })
    .catch(function(err) {
      // execute if you have an error in your http call
    });

编辑将参数传递给模型服务:

InsightApp.factory("DataService", function ($http) {
return {
    GetChartSelections: function (yourParameter) {
            console.log(yourParameter);
            return $http.get('Home/GetSalesData')
                .then(function (result) {
                return result.data;
            });
        }
    };
});

然后:

InsightApp.controller("DataController", function($scope, $http, DataService){

var response = DataService.GetChartSelections('only pie one')
    .then(function(res) {
       // execute when you have the data
    })
    .catch(function(err) {
      // execute if you have an error in your http call
    });