$emit from子控制器工作，但是$broadcast from父控制器不起作用

$emit from child controller works, but $broadcast from parent scope doesn't

本文关键字：from 控制器 broadcast 不起作用 但是 工作 emit      更新时间：2023-09-26

当我调用$scope.$broadcast时，我的孩子正在听的任何事件都没有被触发。下面是一个简化的示例:

HTML

下面是我想要完成的一个简单的例子:

<div ng-app="app" ng-controller="parentCtrl">
  <div ng-controller="childCtrl">
    <b>Parent Event:</b> {{outer}}<br />
    <b>Child Event:</b> {{inner}}<br />
  </div>
</div>

AngularJs 

mc = angular.module('app', [
  'app.controllers',
]);
angular.module('app.controllers', [])
    .controller('parentCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) {
        $scope.outer = 'not executed';
        $scope.$broadcast('EventFromParent');
        $scope.$on('EventFromChild', function () { 
          $scope.outer = 'executed';
        });        
    }])
    .controller('childCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.inner = 'not executed';
        $scope.$on('EventFromParent', function () { 
          $scope.inner = 'executed';
        });
        $scope.$emit('EventFromChild');
    }]);

输出

我希望看到父级和子级都被触发，但是我没有为子级触发。

EXPECTED                      ACTUAL
------                        ------
Parent Event: triggered       Parent Event: triggered
Child Event: triggered        Child Event: not triggered

我的猜测是子控制器还没有准备好接收事件。我需要等到DOM准备好，但我不知道如何在Angular中做到这一点。你可以随意告诉我，我做的事情也是这样做的。

<标题> Plunkr

问题是父控制器中的$scope.$broadcast在子控制器中的$scope.$on之前被调用，因此在'EventFromParent'广播到子范围时没有此事件的侦听器。

您需要在广播或发出事件之前注册事件侦听器。在您的情况下，实现这一目标的一种方法是使用$timeout:

$timeout(function() {
    $scope.$broadcast('EventFromParent');
});

(你需要先注入$timeout服务)

这样，您有效地延迟了事件广播，并且事件侦听器有机会注册自己，因此当事件发生时，侦听器将被调用。

相关文章：