如何使用 $broadcast、$on 和 $emit 在控制器之间共享数据？答案

【问题标题】：How to share data among the controllers using $broadcast, $on and $emit?如何使用 $broadcast、$on 和 $emit 在控制器之间共享数据？
【发布时间】：2018-09-15 17:30:24
【问题描述】：

我是 AngularJS 网络开发的新手。

步骤 1. 在初始化期间，我通过 http 调用从服务器获取登录信息。比如说，用户名、用户 ID 和其他一些信息。

STEP 2. http调用成功后，我想填充loginObj对象，例如

$scope.loginObj = { UserID = '', UserName = '', SomeData: '' };

$scope.loginObj.UserID = 1000;

$scope.loginObj.UserName = 'John Doe';

$scope.loginObj.SomeData = 'Some other data';

步骤 3. 我想广播 $scope.loginObj 对象信息 $rootScope.broadcast 方法。

我见过的所有例子都使用了某种点击按钮。无按钮点击解决方案。

STEP 4. 在子控制器中，我想接收广播来自父控制器的信息。

    How can I receive this information?

第 5 步。有时我还会在子控制器处获得一些额外信息。

如何从子控制器接收此信息到父控制器控制器？

请给我一个解决方案或指导我一些可以获取示例的网站。

【问题讨论】：

你试过实现$broadcast、$on和$emit吗？如果是这样，请分享有关您如何实现它的代码。我们会从那里拿走它。或提供带有控制器结构的基本 plunkr 演示代码并更新您的问题。
子控制器只能从父控制器继承数据。为什么你觉得你需要为此使用 $scope/$rootScope 事件总线？
@georgeawg，您是正确的并且正在使用它。结构为 Home/Page2/Page3/Page4。如果您只是单击任何页面，我会毫无问题地获得 rootScope 值。我面临的问题是，一旦您刷新 page2，我就会失去价值。在我看来，这是一种计时器问题。如果我放置警报 Home 控制器，那么我可以看到 Page2 控制器中的值。我在这里遗漏了一些东西。请帮帮我。我在主页中使用 ng-view。因此，任何刷新都必须通过主页才能进入 Page2/Page3。
@ShashankVivek，您能否看看我对 georgeawg 的回复并指导我如何解决这个问题？
@Alomoni：当然，您能否在plnkr.co/edit 上提供演示代码。使用 refresh the page2, I lose the value ，您的意思是重新加载站点吗，如果是这种情况，那么它将丢失，因为您的 app 已完全重新加载。如果您希望在重新加载时发出某些事件，您可以在ng-init 的HomeController 中输出该代码。如需快速解决方案，请创建一个有效的 plunkr 演示，我们可以在其中复制并查看您在实施什么

标签： javascript angularjs events

【解决方案1】：

创建一个 angularjs 服务，而不是使用广播，您可以在其中保留从 http 调用获得的登录信息，您可以将此服务注入您需要登录信息的控制器中。

创建这样的服务：

/*app is your angular module name*/
app.factory('authFactory',['$state',function( $state){
    var authFactory = {

          currentUser: {},

          setCurrentUser: function(userinfo){

             authFactory.currentUser = userinfo;

            },

          getCurrentUser: function(){

            return authFactory.currentUser;
           }
      };

      return authFactory;

}

在您的登录控制器中，注入 authFactory，然后一旦用户登录，调用 authFactory.setCurrentUser 并传递一个对象（{login: userlogin, email: useremail}）。如果您需要在另一个页面中登录用户，只需在该页面中注入 authFactory 并调用 authFactory.getCurrentUser()。

【讨论】：

我已经阅读了有关该服务的信息，但没有看到任何关于此的示例。您使用您的信息登录并登陆主页。单击到第 2 页并刷新页面。你认为我会有相同的登录信息吗？或者另一个http调用来获取登录信息？请给我一个解决方案。
第二个场景您以管理员身份登录站点并登陆另一个页面，因为您想冒充另一个用户，例如 John Doe。在此屏幕中，您提供 John Doe 唯一编号并为 John Doe 提供相关信息。这里经过身份验证的用户 = 管理员，但普通用户将是 John Doe，因为您正在尝试更新/检查 John Doe 记录。如何保存这些新的登录信息？