javascript - 来自子 Controller 的 $emit 有效，但来自父范围的 $broadcast 无效

Question

当我调用 $scope.$broadcast 时，我的 child 正在收听的所有事件都没有被触发。一个简化的例子如下:

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

理论

我的猜测是子 Controller 还没有准备好接收事件。我需要等到 DOM 准备好，但我不知道如何使用 Angular 来做到这一点。请随时告诉我，这也是我正在做的事情的错误方法。

Plunkr

Answer 1

问题是父 Controller 中的 $scope.$broadcast 在子 Controller 中的 $scope.$on 之前被调用，所以在“EventFromParent”广播到子作用域的时间。

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

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

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

这样，你就有效地延迟了事件广播，并且事件监听器有机会注册自己，所以当事件发生时，监听器将被调用。