Question

我正在尝试从服务中获取一些数据到控制器中，并且我一直得到一个未定义的变量。

angular
    .module("classes")
    .service("MyService", function ($http) {

        this.foo;
        $http.get("/classes/all").then(function (response) {
            this.fighters = response.data;
            this.foo = this.fighters;
            console.log(this.foo);
        });
        console.log(this.foo);

    })

当我运行这个时，我进入控制台，按此顺序，第11行未定义，然后第9行返回数组。

当我在控制器中尝试获取变量foo时，它也表示未定义。

$scope.fooFighters = MyService.foo;

Answer 1

原因是您的API调用的异步执行。我建议你重写代码以使用将返回promise对象的工厂。无需带来不必要的变量。

angular.module("classes").factory("MyService", function($http) {
    return {
        fighters: function() {
            return $http.get("/classes/all").then(function(response) {
                return response.data;
            });
        }
    }
})

在您的控制器中，您可以通过在控制器中注入服务然后引用它来获取值，如

 MyService.fighters().then(function(data){
   $scope.fooFighters = data;
  });

Answer 2

因为在第9行工作之后加载ajax / http请求数据需要一些时间。因此，如果您想使用ajax / http数据，那么您应该在

中编写代码/函数

$http.get("/classes/all").then(function (response) {
        // do something
    });

AngularJS $ http请求内部服务

2 个答案: