AngularJS 应用程序中的异步延迟答案

【问题标题】：Asynchronous lag in AngularJS appAngularJS 应用程序中的异步延迟
【发布时间】：2014-11-12 13:56:26
【问题描述】：

我想在应用加载时在全局变量/rootScope 中设置一个数组。我从问题服务中获取数据。由于我想缓存有关加载时间的问题，因此我尝试了很多方法将其缓存在角度模块运行函数中的 rootScope 中。但是每次异步调用都会有延迟。滞后意味着当我第二次打开页面时，我会在页面上呈现数据。

尝试了一个解决方案（有效）：在问题服务所有方法中返回承诺 - 但需要注意的是，它会在我执行问题服务all() 方法时调用 api 。

请提出建议。

以下是我的代码：

App.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function ($ionicPlatform, Questions,$rootScope) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });

//starter.services.
//Questions.store().then(function (res) { $rootScope.questions = res.data });

})

Controllers.js

angular.module('starter.controllers', [])

.controller('DotnetCtrl', function ($scope, Questions, $rootScope) {
    $scope.questions = Questions.all();
})

Service.js

.factory('Questions', function ($http) {
var questions = [];

$http.get('http://api.clickmynotes.com/api/questions').success(function (data) { questions = data; });

return {
    all: function () {
        return questions;

    },
    get: function (id) {
        return questions[id];
    }
}
});

【问题讨论】：

1 - 您需要在 ui-router 中使用 resolve 在视图之前获取数据。 2 - 在本地存储中缓存数据。

标签： angularjs asynchronous promise angular-promise

【解决方案1】：

问题出在这里：

.success(function (data) { questions = data; });

这意味着当您最终从服务器获取数据时，您将用一个新数组替换 questions 数组。由于控制器在htttp响应到来时已经调用了Questions.all()，所以它已经获得了之前的空问题数组，控制器引用的这个数组保持原样。

您想要的是填充控制器已经获得的数组：

.success(function (data) { 
    angular.forEach(data, function(element) {
        questions.push(element);
    }); 
});

这样，控制器最初得到一个空数组，页面不显示任何元素，但是一旦服务器的响应可用，控制器引用的问题数组就会被填充，并且视图重绘自身，显示元素。

这种技术是 $resource 服务使用的技术。

【讨论】：