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

来源:互联网 发布:历史时间轴软件 编辑:程序博客网 时间:2024/05/16 12:45

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();
      }
    });


原创粉丝点击