Angularjs中的事件广播 —$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信

介绍:

$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

比如父作用域里有如下

// 弹窗控制
      view: function (){
         if (1) {
             var args = $.extend({}, vm.param);
             $scope.$broadcast('attendanceDetail', args);
         }
      },

调用后
那么子作用域里有如下:

    $scope.$on('attendanceDetail', function(event, msg) {
            console.log(1);
      NG.pop.attendanceDetail = true;
      if (msg) {
        vm.func.search();
      }
    });
 ES6 promise小结
HTML模板渲染引擎Hogan 
上一篇:ES6 promise小结
下一篇:HTML模板渲染引擎Hogan


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ