javascript - Ionic-AngularJS : Emitting Event To Parent Only ReBroadcasts To Child That Emitted Event

Question

这听起来可能有点模糊，但我仍在学习并试图理解它是如何工作的。

我开始使用“侧菜单”启动 ionic 项目，它已经设置了带有“应用程序”抽象状态/ View / Controller 的 urlrouter 配置以及一些带有自己的 Controller 的附加状态。

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })


  .state('app.home', {
    url: "/home",
    views: {
      'menuContent': {
        templateUrl: "templates/home.html",
        controller: 'HomeCtrl'
      }
    }
  })

  .state('app.page2', {
    url: "/page2",
    views: {
      'menuContent': {
        templateUrl: "templates/page2.html",
        controller: 'Page2Ctrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
})

在应用程序 Controller (AppCtrl) 中，我正在监听一个名为 RepeatMyEvent 的事件，并且它广播一个名为 myEvent 的事件。

我在每个其他 Controller 中都有一个 myEvent 事件的监听器。当我从其他任何一个 Controller 发出repeatMyEvent 事件时(模板上有一个调用 testEmit() 函数的按钮)，我只看到发出repeatMyEvent 事件的 Controller 响应myEvent 事件。看起来也许只有 View 当前可见的 Controller 正在响应它。不过，我希望所有 Controller 都能对此做出回应。

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal


  $scope.$on('repeatMyEvent', function(event, args) {
    console.log('repeatMyEvent event received');


    $scope.$broadcast('myEvent');

  });



})

.controller('HomeCtrl', function($scope, $stateParams) {


  $scope.$on('myEvent', function(event, args) {
    console.log('HomeCtrl received myEvent');


  });

  $scope.testEmit = function() {
    $scope.$emit('repeatMyEvent');
  }


})

.controller('Page2Ctrl', function($scope, $stateParams) {


    $scope.$on('myEvent', function(event, args) {
        console.log('Page2Ctrl received myEvent');


    });

    $scope.testEmit = function() {
        $scope.$emit('repeatMyEvent');
    }


})

;

我能理解这一点的唯一方法是抽象状态的 Controller 不是单例，并且我的每个 Controller 都有自己的版本。或者我是否完全误解了 $scope 与 Controller 的关系？

所有这些的后续工作是如何让它工作，以便所有 Controller 都能响应来自 AppCtrl 的广播消息。

注意:我也尝试过 $scope.$root 并且得到了相同的行为。

Answer 1

Controller 被实例化，$scope DI'd => link(不是单例)；

从我在你的路由器中看到的，你有三个独立的页面，每个页面都有自己的 URL。我很好奇为什么你试图让你的 Controller 在特定的 DOM 没有渲染的情况下进行交互。

如果您必须在加载时为每个页面维护某种类型的数据对象，您可以创建一个在初始应用程序加载时运行并包含您的值的工厂/服务。然后只需 DI 到需要该服务数据的每个 Controller 即可。

此外，这就是广播和发出的工作方式。

                   3
               --------
              |        |
             ---     ----
            1   |    2   |
          ---  ---  --- ---
          |  | |  | | | | |

看看这棵树。你如何回答以下问题？注意:还有其他方法，但这里我们将讨论广播和发射。另外，当阅读下面的文本时，假设每个数字都有自己的文件(指令、 Controller )，例如:一.js、二.js、三.js。

1. 1 如何与 3 对话？

在文件 one.js 中

scope.$emit('messageOne', someValue(s));

在文件 Three.js 中

scope.$on('messageOne', someValue(s));

2 如何与 3 对话？

在文件two.js中

scope.$emit('messageTwo', someValue(s));

在文件 Three.js 中

scope.$on('messageTwo', someValue(s));

3 如何与 1 和/或 2 对话？

在文件 Three.js 中

scope.$broadcast('messageThree', someValue(s));

在文件 one.js && Two.js 中您想要捕获消息的文件。

scope.$on('messageThree', someValue(s));

2 如何与 1 对话？

在文件two.js中

scope.$emit('messageTwo', someValue(s));

在文件 Three.js 中

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

在文件 one.js 中

scope.$on('messageTwo', someValue(s));

但是

当所有这些嵌套子节点尝试像这样进行通信时，您很快就会看到许多 $on 的 $broadcast 的和 $emit 的。这就是我喜欢做的事情。

在父节点(本例中为三个...)

所以，在文件 Three.js

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

现在，在任何子节点中，您只需$emit消息或使用$on捕获消息。

注意: 通常，在不使用 $emit、$broadcast 或 $on 的情况下，在一个嵌套路径中进行串扰通常很容易，这意味着大多数用例都是在您尝试获取 < strong>1 与 2 进行通信，反之亦然。

2 如何与 1 对话？

在文件two.js中

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){
  return { name: 'talkToOne', data: [1,2,3] };
}

在文件 Three.js 中

We already handled this one remember?

在文件 one.js 中

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

您仍然需要对要捕获的每个特定值使用 $on，但现在您可以在任何节点中创建您喜欢的任何内容，而不必担心如何跨父间隙获取消息。

希望这有帮助...