在angular的内部 有一套基于$route的事件传播和监听的方式
$broadcast 和 $emit是用来进行事件传播的
$on是用来进行事件监听的
这种模式是比较好的事件驱动模式,是比较常见的"publish/subscribe"设计模式
在android的五大基础组件中就有一个是broadcast,基本的思想是一样的
首先是谁能发动广播:
很显然 是$scope
$rootscope作为全局的scope对象,显然他的传播方式是全局传播,如果你想让你的全局所有的的$on都能监听到该事件的话请使用$rootscope作为发起广播事件的主体
$scope.($emit/$broadcast)
<span style="font-family:Microsoft YaHei;"><div ng-controller="TopLevelController">
<div ng-controller="SelfController">
<div ng-controller="ChildController"></div>
</div>
<div ng-controller="SameLevelController"></div>
</div> </span>
这时候选择selfcontroller作为发送广播的主体
app.controller("SelfController",function($scope) {
$scope.$broadcast('selfbroadcast', {message:"send by broadcast"});
$scope.$emit('selfemit', {message:"send by broadcast"});
});
这时候 在每一个controller中添加$on事件去监听
<span style="font-family:Microsoft YaHei;">app.controller("TopLevelController",function($scope) {
$scope.$on('selfbroadcast',function(event,data){
console.log("i'm toplevel:"+data.message)
});
$scope.$on('selfemit,function(event,data){
console.log("i'm toplevel:"+data.message)
});
})</span>
通过console打印的结果可以发现
由self通过broadcast发出的 被自己的子controller接收到了
通过emit发出的广播 被自己的父controller接收到了
</pre></p><p>那么如果我想取消订阅当前的对事件的订阅怎么办</p><p>这个可以参考下angular的源码</p><p>在$on函数的结尾处</p><p><pre name="code" class="javascript"> return function() {
namedListeners[indexOf(namedListeners, listener)] = null;
decrementListenerCount(self, 1, name);
};
所以显然,我们只需要触发这个return的funciton即可取消对当前事件的监听了
//开始监听
var mylistener=$scope.$on('self:broadcast',function(event,data){
console.log("i'm toplevel:"+data.message)
});
//取消对事件的监听
mylistener()
}
那么如何取消$rootscope的事件监听呢?
$rootScope.$$listeners.nameOfYourEvent=[];
在使用$emit进行传播到时候 我们可以使用
$scope.$on('myEvent', function (event, data) {
event.stopPropagation();
});
去取消当前的事件
如果需要向同级别的controller传递广播的话
$scope.$parent.$broadcast()
可以先获取$scope的父亲,请他去向所有的子对象进行广播处理,这样就能接收到了