[AngularJS]-多scope之间的通讯

理解Scope间数据通讯与多Scope消息发布/订阅机制

最新推荐文章于 2019-05-24 13:49:36 发布

weixin_33851604

最新推荐文章于 2019-05-24 13:49:36 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/vzr/blog/596805

本文介绍了如何利用AngularJS的scope的$emit方法与$on方法实现多scope间的通讯，通过发布/订阅的方式共享数据。包括代码实现、使用方法和应用场景的详细解释。

为什么80%的码农都做不了架构师？>>>

关于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域中进行显示，这种情况下就可以在接收数据的域对要发布的事件进行监听(这里要注意监听的事件名称一定要与要发布的事件名称一致)；实现的效果就是当点击按钮获取到数据后，监听的区域就可以获得该数据。

** 注：如有其它疑问请在文章后留言**

转载于:https://my.oschina.net/vzr/blog/596805