AngularJS从控制器数据传递到另一个控制器 [英] AngularJS pass data from controller to another controller

问题描述

我做了什么。
我检索与特定的指令一controllerA的来自YouTube API使用JSON视频列表。 JSON的包含视频的列表和视频本身的细节。

What I have done. I retrieve a list of videos from youtube api with json in a controllerA with specific directive. The json contain the list of video and the video itself details.

我想要做什么。
当对视频点击，我想视频的详细信息在其他NG-观点与其他controllerB使用JSON数据之前我要求显示。

What I want to do. When click on a video, I want the video's details display in another ng-view with other controllerB with using the json data I request before.

所以我的问题是
如何从controllerA数据传递到controllerB

So my question is How to pass the data from controllerA to controllerB

的注意的 - $ HTTP服务是controllerA使用

Note - $http service is use in controllerA

推荐答案

这是AngularJS启动时常见的疑虑之一。按您的要求，我相信你最好的选择是创建一个服务的检索电影列表，然后使用此服务并重 controllerA 和 controllerB 。

This is one of the common doubts when starting with AngularJS. By your requirement, I believe your best option is to create a service that retrieves the movie list and then use this service in both controllerA and controllerB.

module.factory('youtube', function() {
  var movieListCache;

  function getMovies(ignoreCache) {
    if (ignoreCache || !movieListCache) {
      movieListCache = $http...;
    }

    return movieListCache;
  }

  return {
    get: getMovies
  };
});

然后你只需注入该服务在两个控制器。

Then you just inject this service in both controllers.

module.controller('controllerA', ['youtube', function(youtube) {
  youtube.get().then(function doSomethingAfterRetrievingTheMovies() {
  });
}]);

module.controller('controllerB', ['youtube', function(youtube) {
  youtube.get().then(function doAnotherThingAfterRetrievingTheMovies() {
  });
}]);

如果您需要controllerA在使用它之前在B，则可以创建在服务更多的方法来操作的信息。事情是这样的：

If you need controllerA to manipulate the info before you use it in B then you could create more methods in the service. Something like this:

module.factory('youtube', function($q) {
  var movieListCache,
      deferred = $q.defer();

  function getMovies(ignoreCache) {
    if (ignoreCache || !movieListCache) {
      movieListCache = $http...;
    }

    return movieListCache;
  }

  function getChangedMovies() {
    return deferred.promise;
  }

  function setChangedMovies(movies) {
    deferred.resolve(movies);
  }

  return {
    get: getMovies,
    getChanged: getChangedMovies,
    setChanged: setChangedMovies
  };
});

如果你不知道什么 $ Q 是的看一看的文档。这是必须处理异步操作。

If you don't know what $q is, take a look at the docs. This is mandatory to handle async operations.

反正有太多完成此任务的其他一些方法：

Anyway, there are some other ways of accomplishing this task too:

1. 您可以在 $ rootScope 保存视频


2. 如果该控制器是父亲和儿子，你可以使用需要来获取对方控制器

IMHO，＃1是一个通用的解决方案;如果没有其他选择，我只用它。和＃2，如果你有一个内在需要这些控制器，如配置或让一知道对方的存在之间的通信是非常有用的。这里有一个 例子。

IMHO, #1 is a generic solution; I'd use it only if there is no other option. And #2 is useful if you have an intrinsic need to communicate between these controllers, such as configuring or letting one know about the other's existence. There is a example here.

您想要做的是共享状态信息单​​;因此，服务是要走的路。

What you want to do is to share stateful singleton information; therefore, a service is the way to go.

这篇关于AngularJS从控制器数据传递到另一个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！