无需发出多个请求即可在控制器之间共享异步数据 [英] Share async data between controllers without making multiple requests

问题描述

我正在尝试发出一个 $http 请求来获取我的一个 JSON 文件并在我的所有控制器中使用这些数据.

I'm trying to make a single $http request to get one of my JSON files and use the data across all my controllers.

我在 egghead.io 上看到了如何在多个控制器之间共享数据，我还阅读了这个 StackOverflow 问题:在 angular.js 中的控制器之间共享变量".

I saw on egghead.io how to share data across multiple controllers, and I've also read this StackOverflow question: "Sharing a variable between controllers in angular.js".

然而，那里的答案不使用 $http 模块.使用 $http 时，控制器没有数据可以处理，当收到响应时已经太晚了.

However, the answers there don't use the $http module. When using $http, the controllers don't have the data to work on, and by the time the response is received it's already too late.

然后我在 StackOverflow 上找到了方法 $q.defer 和这个问题:AngularJS 在控制器之间共享异步服务数据"

I then found the method $q.defer and this question on StackOverflow: "AngularJS share asynchronous service data between controllers"

发布在那里的解决方案工作正常，但它有两个问题:

The solution posted there works fine, BUT it has two issues:

1. 每个控制器都会触发$http请求来获取另一个控制器已经使用过的相同数据；并且，
2. 如果我尝试处理收到的数据，我有一个 then 函数.

1. Each controller will trigger the $http request to obtain the same data already used in another controller; and,
2. If I try to manipulate the data received I have a then function.

下面你可以看到我的代码:

Below you can see my code:

controllers.js

'use strict';

/* Controllers */

function appInstallerListCtrl($scope, Data) {
  $scope.apps = Data;
}

function appInstallerDetailCtrl($scope, $routeParams, Data) {
  $scope.appId = $routeParams.appId;
  $scope.apps = Data;  
  console.log($scope.apps); // <-- then function
  console.log(Data); // <-- then function with $vv data returned but I can't access it

  for (var i in $scope.apps) // <--- no way, baby!
    console.log(i);
}

app.js

var app = angular.module('appInstaller', []);

app.factory('Data', function($http, $q) {
  var defer = $q.defer();
  $http.get('apps.json').then(function(result) {
    defer.resolve(result.data.versions.version);
  });
  return defer.promise;
});

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/app', {templateUrl: 'partials/app-list.html',   controller: appInstallerListCtrl}).
    when('/app/:appId', {templateUrl: 'partials/app-detail.html', controller: appInstallerDetailCtrl}).
    otherwise({redirectTo: '/app'});
}]);

我想要的是，在启动应用程序时，将执行 $http 请求，并且响应将在整个应用程序的所有控制器中使用.

What I'd like to have is that when launching the app, the $http request will be performed and the response will be used throughout the app across all controllers.

谢谢

推荐答案

既然你使用的是promise，那么访问promise返回的数据就使用回调语法

Since you are using a promise, to access the data returned by promise use the callback syntax

function appInstallerDetailCtrl($scope, $routeParams, Data) {
  $scope.appId = $routeParams.appId;
   Data.then(function(returnedData) {
        $scope.apps=returnedData;
        console.log($scope.apps);
        for (var i in $scope.apps)
           console.log(i)   
   });   
}

确保这一点

defer.resolve(result.data.versions.version);

resolve 返回数组，以便上述代码工作.或者查看数据中的内容并调整控制器代码.

resolve returns array, for the above code to work. Or else see what is there in data and ajust the controller code.

这篇关于无需发出多个请求即可在控制器之间共享异步数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！