Angular JS 数据未从异步 http 请求中填充答案

【问题标题】：Angular JS data not populated from asynchronous http requestAngular JS 数据未从异步 http 请求中填充
【发布时间】：2012-07-25 06:59:19
【问题描述】：

我正在尝试获取加载 div，以显示我的 Angular 模块何时与服务器联系。我正在使用 AngularJS 1.0.1 和 AngularJS Resources 1.0.1 来扩展 HTML 和 jquery 1.7.2 的功能，以获得一些额外的 dom 操作和 ajax 支持。

我已经发现如果我在 async false 中运行 ajax 调用，加载 div 将不会显示，除了 Firefox，它显示但动画 gif 不是动画。

如果我在 async true 中运行 ajax 调用，返回的数据不会加载到已加载模板部分的角度模型变量中。

是否有可能让动画加载 div 显示并获取角度数据以加载到模型中？

【问题讨论】：

标签： ajax jquery asynchronous angularjs

【解决方案1】：

希望我理解正确。您想显示 ajax 请求的加载进度。为此，您需要一个响应拦截器。这是一个如何执行此操作的示例http://jsfiddle.net/zdam/dBR2r/

// register the interceptor as a service, intercepts ALL angular ajax http calls
.factory('myHttpInterceptor', function ($q, $window, $rootScope) {
    return function (promise) {
        $rootScope.nowloading = true; // use ng-show="nowloading" on element containing spinner
        return promise.then(function (response) {
            // do something on success
            $rootScope.nowloading = false; // need to turn it off on success 
            return response;

        }, function (response) {
            // do something on error
            $rootScope.nowloading = false;  // need to turn it off on failure
            $rootScope.network_error = true;   // you might want to show an error icon.
            return $q.reject(response);
        });
    };

希望对你有帮助

--丹

【讨论】：

您好 Dan，我去了您的 jsfiddle，将 jquery 添加到脚本列表中，在 html 顶部添加了加载 div 块，并将您的警报替换为 $('#loading')。显示（）;和 $('#loading').hide();在适当情况下。它可以工作link。谢谢！不幸的是，我更早地发现了自己的工作。由于 $http 资源是一个承诺，因此没有必要中断它。对于这种情况，我只需要在运行 $http 调用之前调用 .show() 然后添加 .hide();在错误和成功回调函数中。很抱歉让你做所有这些工作。
Brandon，拦截器的好处之一是它适用于所有 ajaxy 调用。我已经使用这种技术完成了几个应用程序。