`

AngularJS使用$on、$emit和$broadcast在作用域之间进行交互

阅读更多

        AngularJS中的作用域具有继承性,并且结构是嵌套的。也就是说,对于每个Angular应用或者ng-app来说,只有一个主作用域$rootScope,其他所有作用域都会继承这个主作用域,或者嵌套在这个主作用域内部。通常情况下,你会发现作用域之间不会共享变量,并且互相之间不会基于原型继承。

        如果需要在两个作用域之间进行通信,应该怎么做呢?其中一种方法是:创建一个服务,这个服务在整个应用范围内是一个单例,并且所有作用域之间的交互都通过它进行。另一种方法是:通过作用域上的事件进行交互。但是,这样做存在一些局限性。例如,你通常不能向正在监听的所有作用域同时广播事件。你必须选择是和父节点交互还是和子节点交互。

        下面是一个如何监听事件的例子,在例子中,Start System(星系)中的作用域对象正在等待并监听planetDestroyed事件。

scope.$on('planetDestoryed', function(event, galaxy, planet) {
     //自定义事件,这样星球就被摧毁了
     scope.alertnearbyPlanets(galaxy, planet);
});

        事件监听器上的这些额外参数是从哪来的呢?我们来看一看,单个的星球是如何和它所属的Star System进行交互的:

scope.$emit('planetDestroyed', scope.myGalaxy, scope.myPlanet);

        传递给$emit的附加参数将会被当作函数参数传递给监听器函数。同时,$emit只会从当前的作用域向上进行通信,所以星球上可怜的居民(如果他们自已带有作用域对象的话)不会意识到他们的星球正在被摧毁。

        类似地,如果Galaxy(银河系)需要向下和它的子节点进行交互,那么在Star System作用域中,它应该像下面这样进行交互:

scope.$emit('selfDestructSystem', targetSystem);

        然后正在监听此事件的整个Star Systems都需要检查targetSystem,并且决定它们自已是否需要根据所接收的指令进行自我毁灭操作:

scope.$on('selfDestructSystem', function(event, targetSystem) {
     if(scope.mySystem == targetSystem) {
           scope.selfDestruct();  //引爆!!
     }
});

        当然,在事件向上(或者向下)传播的路径上,有一种操作可能是非常必要的,那就是在特定的层级或者作用域上说:“够了,不允许你通过这里!”,或者其他可以阻止事件的默认行为。传递给监听器的事件对象上带有一些函数,它们可以实现以上需求,甚至可以支持更多操作。如下所示:

  • 大小: 45.1 KB
分享到:
评论

相关推荐

    Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    在Self控制器中,我们定义了toParent和toChild方法,分别使用$emit和$broadcast向父级和子级作用域广播事件。同时,Self、Parent和Child控制器都绑定了$on监听器来捕捉这些事件。通过这样的设置,我们可以清楚地看到...

    AngularJS Controller作用域.docx

    3. **事件广播与监听**:Controller可以通过 `$scope.$on()` 监听事件,而 `$scope.$emit()` 和 `$scope.$broadcast()` 可以用来在作用域树上向上或向下广播事件,实现不同Controller间的通信。 在JavaScript代码中...

    AngularJS控制器之间的通信方式详解

    AngularJS提供了作用域上的事件监听和触发功能,包括$on、$emit和$broadcast三个方法。 $on方法用于在作用域上设置事件监听器,能够捕捉到由$emit或$broadcast发起的事件。 $emit方法用于向上级作用域广播事件,当...

    angular中实现控制器之间传递参数的方式

    AngularJS提供了事件广播机制,允许控制器之间通过事件来传递数据,包括 `$on`、`$emit` 和 `$broadcast`。 - `$on`: 注册一个事件处理函数,当事件被当前作用域或其上级作用域触发时执行。 - `$emit`: 向当前...

    AngularJs实现聊天列表实时刷新功能

    AngularJS的$rootScope提供了$broadcast()和$on()方法,可用于在不同作用域之间进行事件的广播和监听。$rootScope是所有作用域的父级,它的事件可以在任何子作用域中被捕获,这使得我们可以在不同控制器之间进行通信...

    Angular 案例

    1. **Scope作用域**:AngularJS中的作用域可以分为全局作用域(`$rootScope`)和局部作用域(通过指令定义的子作用域)。 - **全局作用域**:所有的局部作用域最终都会向上级原型链继承至`$rootScope`。 - **...

    对angularjs框架下controller间的传值方法详解

    使用`$emit`和`$on`组合时,应尽量避免在大量子作用域中触发和监听事件,因为这可能导致性能下降。为优化性能,可以考虑在$rootScope上绑定事件监听器,并在不再需要时手动移除。 ```javascript app.controller('...

    详解angularJs中自定义directive的数据交互

    - 指令可以通过`$emit`和`$broadcast`发送事件,而父控制器或其他兄弟指令可以通过`$on`监听这些事件,实现数据或行为的通信。 5. **服务(Services)**: - AngularJS的服务可以作为全局的单例对象,用于在不同...

    AngularJS 事件发布机制

    AngularJS事件发布机制通过Scope对象的$broadcast、$emit和$on方法,提供了一种高效的方式来处理作用域间事件的发布和监听。这一机制是AngularJS数据绑定和作用域继承特性的延伸,使得组件化开发更加简洁和灵活。在...

    AngularJS 0003: 指令

    AngularJS提供了多种方式实现指令之间的通信,包括使用`$emit`、`$broadcast`事件广播,以及使用`require`属性来引用其他指令的控制器。 **8. 组合指令** 通过使用`require`属性,一个指令可以访问并控制另一个...

    AngularJS控制器controller正确的通信的方法

    AngularJS提供了$on、$emit和$broadcast三个核心方法来实现作用域之间的事件通信。 - $on用于监听作用域对象上的自定义事件。 - $emit用于向上冒泡事件,通知当前作用域的父级作用域,直至$rootScope。 - $...

    AngularJS实现自定义指令与控制器数据交互的方法示例

    在指令与控制器之间的交互方面,除了直接使用父作用域之外,还可以通过以下几种方式实现交互: 1. 使用双向数据绑定(ngModel),如示例中的输入框绑定。 2. 通过服务(Services)或工厂(Factories)在控制器和指令...

    AngularJS-Event-Driven-Architecture:AngularJS 事件驱动架构

    $scope 支持事件的发布和订阅,可以使用 `$broadcast` 和 `$emit` 方法来在作用域树上传播自定义事件。$broadcast 向下传播(从父作用域到子作用域),而 $emit 向上传播(从当前作用域到其所有父作用域)。 3. **...

    AngularJS中的控制器之间的通讯

    3. **事件广播与监听(Event Broadcasting & Listening)**:AngularJS提供了一种通过`$emit`、`$broadcast`和`$on`方法在作用域层次结构中发送和接收事件的方式。父控制器可以`$emit`事件,子控制器可以`$broadcast...

    Angularjs的Controller间通信机制实例分析

    尽可能限制在最小作用域内使用事件,以保持应用的模块化和可测试性。 4. **性能考虑**: 事件机制虽然方便,但过多的事件监听和广播可能影响应用性能。因此,确保仅在必要时使用事件通信,并在不再需要时使用`$...

    解决angularjs service中依赖注入$scope报错的问题

    这是因为$scope对象只存在于控制器的作用域内,它不适用于服务层,因为在服务层中没有与之对应的作用域。 在AngularJS中,服务(Service)是一种设计用来封装逻辑和数据的单例对象,而控制器(Controller)是处理视图...

    modern-web-event:现代网络事件AngularJS 1.4演示

    AngularJS 1.4对事件处理进行了优化,引入了如`$on`、`$broadcast`、`$emit`和`$apply`等服务,用于在应用的不同部分之间传播和处理事件。`$on`用于注册事件监听器,`$broadcast`向下级作用域广播事件,`$emit`则向...

    AnjularJS中$scope和$rootScope的区别小结

    需要注意的是,$rootScope虽然为数据共享提供了方便,但过度使用或滥用会破坏AngularJS数据绑定的封装性和维护性,可能引起作用域冲突和性能问题。因此,建议仅在必要时使用$rootScope,而对于控制器间的通信,应该...

    Angularjs 根据一个select的值去设置另一个select的值方法

    AngularJS 的作用域($scope)为不同的控制器(controller)之间提供了通信的桥梁,因此我们可以通过 $scope 来访问和修改数据。 在提供的代码片段中,我们可以看到有两个控制器:mySelectController 和 ...

    AngularJS实现controller控制器间共享数据的方法示例

    2. **事件广播/发射($emit/$broadcast/$on)**: AngularJS 提供事件系统,允许在作用域树上向上($emit)、向下($broadcast)或在当前作用域及其子作用域($on)中传递消息和数据。 3. **使用 Provider**: ...

Global site tag (gtag.js) - Google Analytics