angularjs中作用域事件的路由与广播

叁歲伎倆 2022-06-09 09:55 175阅读 0赞

# angularjs事件传播方式 #

angularjs作用域事件相关的方法：$on()，$emit()，$broadcast()

angularjs作用域支持两种事件传播方式

1.  事件从子作用域路由到父作用域（$emit()函数）
2.  事件从父作用域广播到所有的子作用域中（$broadcast()函数）

# angularjs事件传播 #

angularjs作用域对象提供的$emit()方法用于将子作用域的事件路由到父作用域，如果在父作用域注册的事件监听器中不调用event事件对象的stopPropagation()方法，事件将一直向上传播。stopPropagation()方法事阻止事件向上冒泡。

如若有如下层级关系：

如上面html代码，通过ng-controller初始化了两个作用域，一个父作用域，一个子作用域。可以在子作用域中通过作用域的$emit()方法实现一个事件从子作用域到父作用域的路由，$emit()第一个参数为事件名称，后面可以传入一个或则多个参数，这些参数能够被传递到副作用域的监听器中。

如上代码段，在自作用域中一个发送事件，通过$scope.$emit()路由到父作用域中，在父作用域中调用作用域的$on()方法注册一个事件监听器监听子作用域的事件。$on()接收两个参数第一个监听的事件名称，第二个为事件监听器定义部分，一个方法，接收两个参数，第一个为事件对象event，第二个为子作用域 传递的数据。  
  
在使用$broadcast()实现父作用域事件的广播时同上述过程，广播是广播到所有的子作用域中，换句话说，一个父作用域下面的所有子作用域都可以收到父作用域广播的事件。