关于scope之间数据通讯和数据共享的方式有很多,例如,在rootScope中添加全局的变量、使用service或factory保存暂存在其中等...
下面介绍到的方法将使用scope的**$emit方法与$on**方法,
该实现是以发布/订阅的方式实现scope之间通讯的。
首先来了解下scope的$emit方法与$on方法:
$emit(name, args):
Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
根据官方给出的解释,该方法通过rootScope中对注册监听该事件的scope进行通知,也就是说只要监听了该emit事件并且在现有的rootScope域中存活的scope都可以得到该通知。
$on(name, listener):
Listens on events of a given type.
其中listener的类型是一个方法,可以接收该事件与事件中传递的可变长度参数,并可在方法内进行自定义的操作。
那么我们就通过这种scope域的这两种方法来实现多scope的通讯(消息发布/订阅的方式)。
代码如下:
1.factory声明
/*-----通用发布/订阅器(消息总线)------*/
app.factory('msgBus', ['$rootScope', function($rootScope) {
var msgBus = {};
msgBus.emitMsg = function(msg, data) {
data = data || {};
// 向上游rootScope中所有监听该事件的scope发出该事件
$rootScope.$emit(msg, data);
};
msgBus.onMsg = function(msg, func, scope) {
var unbind = $rootScope.$on(msg, func);
// 当所指定的scope存在(即在scope生命周期之内)时,监听销毁事件并执行传入的func操作
if (scope) {
// 这里要这么做的目的是因为如果清除该事件则在跳转到其它scope时该事件一直会被触发
scope.$on('$destroy', unbind);
}
};
return msgBus;
}]);
2.使用方法
// ps:注意在你的controller中一定要注入该factory
// 发布消息
msgBus.emitMsg('msg','Hello World');
// 监听消息
msgBus.onMsg('msg',function(event,data){
console.log(data);
// 或其它操作
},scope);
3.实现效果以及使用场景
假如当点击某scope域中的某个按钮时获取一些数据并将这些数据在另外一个scope域中进行显示,这种情况下就可以在接收数据的域对要发布的事件进行监听(这里要注意监听的事件名称一定要与要发布的事件名称一致);实现的效果就是当点击按钮获取到数据后,监听的区域就可以获得该数据。
** 注:如有其它疑问请在文章后留言**