Javascript AngularJs“on”事件侦听器接收“broadcast”无序发送的事件

Javascript AngularJs“on”事件侦听器接收“broadcast”无序发送的事件,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,从上面的html指令发送者发出消息1发送到容器。作为回报,它会广播它。指令接收器侦听此广播并发出消息2 ack。容器也会广播此消息。指令活动日志接收这两条消息。但它先接收2个ack,然后接收1个send,即使容器广播1个send,然后接收2个ack 为什么呢?是否可以确保其接收顺序正确 这里是一个测试链接。比较容器接收到的控制台事件与活动日志接收到的屏幕事件。将ActivityLogController更改为侦听$rootScope上的事件 如果将receiver div移到activity l

从上面的html指令发送者发出消息1发送到容器。作为回报,它会广播它。指令接收器侦听此广播并发出消息2 ack。容器也会广播此消息。指令活动日志接收这两条消息。但它先接收2个ack,然后接收1个send,即使容器广播1个send,然后接收2个ack

为什么呢?是否可以确保其接收顺序正确

这里是一个测试链接。比较容器接收到的控制台事件与活动日志接收到的屏幕事件。

将ActivityLogController更改为侦听$rootScope上的事件


如果将receiver div移到activity log div下面,它似乎可以按要求工作。由于$scopes处于相同的层次结构级别,我猜它们是按DOM顺序排列的。不过,使用$rootScope可能是更好的选择

$rootScope.$on('message', function(event, message) { // was $scope.$on()
    $scope.activities.push(message);
});

这很有效。但是如何/为什么?在我的场景中,页面将有多个容器,其中包含许多独立的发送者和接收者,比如小部件。因此,理想情况下,我想限制它$scope。因为这将在容器$scope边界内传递消息。移动接收器bellow确实有效。但在我的场景中,我无法控制布局。因此,我认为可能必须使用$rootScope。
$rootScope.$on('message', function(event, message) { // was $scope.$on()
    $scope.activities.push(message);
});
<div activity-log="">
    <ul>
        <li data-ng-repeat="log in activities">
            {{log.state}}
        </li>
    </ul>
</div>
<div receiver="">{{text}}</div>