Question

我有一个调用API并获取json响应的服务。我将此服务注入我的控制器并尝试使用此接收的数据设置$ scope.tank变量。当我稍后尝试使用此变量时（在同一个控制器中！），它是未定义的。但有趣的是，数据显示在前端。

我看了遍历stackoverflow，我无法弄清楚这一点。我创建了一个plunker示例 - http://plnkr.co/edit/DkFNE8E9897dSF19eaU9?p=preview

我的服务：

appServices.service('TankService', function($q, $http) {

    var data, deferred = $q.defer();

    return {

        init: function(id) {

            var defer = $q.defer();

            $http.get(options.api.base_url, { cache: 'true'})
            .success(function(response) {
                data = response;
                deferred.resolve(data);
            });

        },

        // return promise
        getData: function() {
            return deferred.promise;
        }

    };

});

我在控制器中调用我的数据：

appControllers.controller('TankViewCtrl', ['$rootScope', '$scope', '$q', '$routeParams', '$location', '$sce', '$route', 'TankService',
    function TankViewCtrl($rootScope, $scope, $q, $routeParams, $location, $sce, $route, TankService) {

        var id          = $routeParams.tank_id;
        $scope.id       = id;
        $scope.tank     = [];

        // call our data
        TankService.init(id);

        TankService.getData().then(function(data){
          $scope.tank = data;
        });

        // why is this undefined?
        console.log($scope.tank);

    }
]);

提前感谢您的帮助！

Answer 1

HTTP调用是异步请求。

您要求您的控制器显示请求的结果，而不确定您事先得到了答案。这就是你得到undefined的原因。

使用：

TankService.getData().then(function(data){
    $scope.tank = data;
    console.log($scope.tank);
});

AngularJS $ scope.foo是使用service设置的，但稍后在同一个控制器中未定义

1 个答案: