控制器之间共享数据的异步未做多个请求 [英] 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如何共享多个控制器的数据，我也看到了这个问题的计算器：<一个href=\"http://stackoverflow.com/questions/16508666/sharing-a-variable-between-controllers-in-angular-js\">Sharing在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.

我随后找到了方法 $ q.defer 和计算器这个问题：<一个href=\"http://stackoverflow.com/questions/18125076/angularjs-share-asynchronous-service-data-between-controllers\">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. 如果我试图操纵接收的数据我有一个然后功能。

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.

下面你可以看到我的code：

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.

感谢

推荐答案

由于您使用的承诺，来访问返回的承诺使用回调语法数据

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);

决心返回数组，对于上述code工作。要不看看还有什么数据和ajust控制器code。

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

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