Question

我在服务中有这个代码：

      return {
          getReport: function(data){
            var request = $resource(getResourcePath('report'));
            return request.get(data, function(response) {
                return response;
            }).$promise;
          }
      }

并且此代码在我的控制器中：

    ReportService.getReport(customStruct).then(function(response){
        console.log("respo", response);
        $scope.reportData = {response}
    });

    console.log("$scope1", $scope)
    console.log("$scope2", $scope.reportData)

但是当我尝试访问$scope.reportData时，我得到了undefined。这是$scope1和$scope2输出的屏幕截图：

为什么我无法访问$scope.reportData个对象？请提前帮助和谢谢。

Answer 1

看起来你正在处理经典的“我的数据在哪里”的异步问题。 Angular和JavaScript从http调用返回promises。承诺有点像Angular递给你的盒子，并说“当数据回来时，我会把它放在这个盒子里。”问题是，如果您尝试访问框中的数据，它将不在那里（包括您的console.log）。

如果您在加载视图之前必须拥有数据，请考虑使用$ routeProvider（ng-route）或$ stateProvider（ui-router）的resolve功能。例如：

$stateProvider.state('app.reports', {
    url: 'reports/reports.html',
    ...
    resolve : {
       reportData : function(ReportService) {
            return ReportService.getReport(customStruct);
       }
    }
});

然后在您的控制器中，将reportData指定为依赖性：

.controller('someController', ['$scope',
                                'reportData',
                                function($scope, reportData){
    $scope.reportData = reportData;
}]);

这会强制Angular在加载视图之前等待reportData解析。但是，有一个黑暗面：如果响应需要超过几毫秒才能返回，UI may feel unresponsive。

最后需要注意几点。这一行：

    $scope.reportData = {response}

我不确定你是通过将响应包装在一个对象中来实现的。最后这一行：

        return request.get(data, function(response) {
            return response;
        })

您可能需要考虑返回response.data而不是响应（其中包含标题以及响应成功时可能不需要的其他内容）。

祝你好运！

无法访问$ scope中的对象

1 个答案: