AngularJs作用域事件路由与广播，$broadcast和$emit的使用方法

基于AngularJS入门与进阶（江荣波 著）这本书的笔记

AngularJS 1.x的demo

AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同

---

AngularJs 作用域支持两种传送方法：

• 事件从子作用域路由到父作用域中
• 事件从父作用域广播到所有子作用域中

与AngularJS作用域事件相关的方法有$on()、$emit()、$broadcast()

$emit() 方法实现事件上级路由

$emit方法用于实现事件从子路由作用域路由到父作用域中。$emit方法第一个尝试为事件名称，后面可以传入一个或多个参数，这些参数能够被传递到父作用域注册的事件监听中

示例代码

    
    
    
    



    Parent:{{parent}}
    

        child:
    

20190818_230928[00-00-01--00-00-07].gif

代码演示可以看出，当子作用域值改变后，可以通过父级的$on方法监听到，并作出动作。$on 方法有两个参数，第一个参数为监听的事件名childInfoEvent，第二个参数为事件监听器定义部分，function中有两个参数，第一个参数为事件对象，第二个参数为子作用域中传递的数据

$broadcast() 方法实现事件下级广播

$broadcast() 方法的使用和$emit()方法相同，不同点是他是向子作用域广播事件

示例代码

    
    
    
    



    Parent:
    

        child1:{{child}}
    
    

        child2:{{child}}
    

20190818_230804[00-00-00--00-00-06].gif

同级广播

$broadcast() 和$emit()方法分别实现向下和向上的事件广播和路径，这里做一个简单的实现同级广播的方法

    
    
    
    



    brother1:


    brother2:

20190818_234633[00-00-00--00-00-06].gif

rootScope.on("valueInfoEvent") `事件并作出相应处理，就实现了同级广播。

作用域对像$on()方法

上面不管是向上，向下，同级广播都用到了$on()方法，$on 方法有两个参数，第一个参数为监听的事件名childInfoEvent，第二个参数为事件监听器定义部分，function中有两个参数，第一个参数为事件对象，第二个参数为子作用域中传递的数据

$scope.$on("valueInfoEvent",function (event,data) {
                $scope.browser = data;
            })

data没什么说的，就是传递数据，event有些内置属性和方法

• event.name：事件的名称。
• event.targetScope：事件源作用域对象。
• event.currentScope：当前作用域对象。
• event.stopPropagation()：这个方法用于停止事件的进一步传播。需要注意的是，该方法只对向父作用域路由事件起作用，当在某个事件监听处理方法中调用事件对象的stopPropagation()方法后，事件将不会再向上级父作用域路由。它对调用$broadcast()方法广播的事件不起作用。
• event.preventDefault()：这个方法实际上不会做什么操作，但是会设置defaultPrevented属性为true，直到事件监听器的实现者采取行动之前才会检查defaultPrevented的值。
• event.defaultPrevented：如果调用了event.preventDefault()方法，那么该属性将被设置为true。