javascript - AngularJS 将数据从控制器传递到另一个控制器

Question

我做了什么。我在具有特定指令的控制器A 中使用 json 从 youtube api 检索视频列表。json 包含视频列表和视频本身的详细信息。

我想做的事。单击视频时，我希望使用我之前请求的 json 数据将视频的详细信息与其他控制器 B 一起显示在另一个 ng-view 中。

所以我的问题是如何将数据从控制器A传递到控制器B

注意- $http 服务在 controllerA 中使用

Answer 1

这是开始使用 AngularJS 时常见的疑问之一。根据您的要求，我相信您最好的选择是创建一个检索电影列表的服务，然后在controllerA和controllerB.

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

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

    return movieListCache;
  }

  return {
    get: getMovies
  };
});

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

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

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

如果您需要 controllerA 在 B 中使用信息之前对其进行操作，那么您可以在服务中创建更多方法。像这样的东西：

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，请查看文档。这是处理异步操作所必需的。

无论如何，还有其他一些方法可以完成此任务：

1. 您可以将视频保存在$rootScope
2. 如果控制器是父子，您可以使用 require 来检索彼此的控制器

恕我直言，#1 是通用解决方案；只有在没有其他选择的情况下，我才会使用它。如果您有在这些控制器之间进行通信的内在需求，例如配置或让一个知道另一个的存在，那么 #2 很有用。这里有一个例子。

您要做的是共享有状态的单例信息；因此，服务是要走的路。