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

我做了什么.
我在带有特定指令的controllerA中使用json从youtube api中检索视频列表. json包含视频列表和视频本身的详细信息.

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

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

注 – $http服务在controllerA中使用

最佳答案
这是从AngularJS开始时常见的疑问之一.根据您的要求,我认为您最好的选择是create a service检索电影列表,然后在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() {
  });
}]);

如果在B中使用它之前需要controllerA来操作信息,那么您可以在服务中创建更多方法.像这样的东西:

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是什么,take a look at the docs.这是处理异步操作所必需的.

无论如何,还有其他一些方法可以完成这项任务:

>您可以将视频保存在$rootScope
>如果控制器是父子,您可以使用require来检索每个其他控制器

恕我直言,#1是一个通用的解决方案;只有在没有其他选择的情况下我才会使用它.如果您对这些控制器之间的通信有内在需求,例如配置或让人知道对方的存在,那么#2非常有用.有一个example here.

你想要做的是分享有状态的单身人士信息;因此,服务是要走的路.

转载注明原文:javascript – AngularJS将数据从控制器传递到另一个控制器 - 代码日志