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

Question

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

我想要做什么。 点击视频时，我希望视频的详细信息以其他控制器B的另一个ng视图显示，并使用之前请求的json数据。

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

注 - 与AngularJS启动时的$ HTTP服务使用controllerA

Answer 1

这是常见的疑虑之一。根据您的要求，我相信您的最佳选择是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() { 
    }); 
}]); 

如果您需要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，take a look at the docs。这是处理异步操作所必需的。

总之，有太多完成此任务的其他一些方法：

1. 你可以在$rootScope
2. 保存影片如果控制器是父亲和儿子，你可以使用需要来获取对方控制器

恕我直言，＃1是一个通用的解决方案;只有在没有其他选择的情况下，我才会使用它。如果你有这些控制器之间的内在通信需求，比如配置或者让他们知道对方的存在，那么＃2很有用。有一个example here。

你想要做的是共享有状态的单身信息;因此，一项服务就是要走的路。