Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信,在angularjs中,不推荐控制器之间进行嵌套,所以作用域之间通信通过广播来传递。
$broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下:$broadcast(eventName,args)
$emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域。格式如下:$emit(eventName,args)
$on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。格式如下:$on(event,data)
上述说明中,eventName是需要监控的事件的名称,$on 方法中的参数event是事件的相关对象,data是事件传播的数据。
在$on的方法中的event参数,有如下的属性和方法
事件属性/方法 功能性说明
事件属性/方法 | 功能性说明 |
---|---|
event.targetScope | 获取传播事件的作用域 |
event.currentScope | 获取接收事件的作用域 |
event.name | 传播的事件的名称 |
event.stopPropagation() | 阻止事件进行冒泡传播,仅在$emit事件中有效 |
event.preventDefault() | 阻止传播事件的发生 |
event.defaultPrevented | 如果调用了preventDefault事件则返回true |
method1= function () {
//注册一个向上传播的事件,eventName:'FromSelf', data:oneObject
$emit("xxxx", { divName: "Self", description: "向父传播数据" });
};
method2= function () {
//注册一个向下传播的事件,eventName:'FromSelf', data:oneObject
$broadcast("xxxx", { divName: "Self", description: "向子传播数据" });
};
$on("xxxx", function (event, data) {
console.log("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件:" + event.name + ",它的作用是" + data.description);
});