`

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

    通过以上解析,我们可以看出,在AngularJS中,事件广播机制提供了一种方便的方式来在不同层级的作用域之间进行通信。合理使用$broadcast、$emit和$on方法,可以有效地管理复杂的页面逻辑和事件处理。这对于构建动态...

    AngularJS Controller作用域.docx

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

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

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

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

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

    Angular 案例

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

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

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

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

    如果服务需要与控制器通信,可以使用回调函数、事件、$broadcast、$emit或$root SCOPE的方式来进行。 例如,如果服务需要更新页面上的某个状态,它可以通过返回一个函数,该函数被控制器调用时执行相应的逻辑,或者...

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

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

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

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

    AngularJS中的控制器之间的通讯

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

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

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

    AngularJS深入探讨scope,继承结构,事件系统和生命周期

    Scope的作用域和层次结构** Scope在AngularJS中扮演着数据绑定的角色,它是模型与视图之间通信的桥梁。每个Scope都是`Scope`类的一个实例,提供了管理生命周期的方法、事件传播机制以及支持模板渲染的功能。Scope...

    directives-demo:东西

    10. **指令的事件处理**:如何监听和触发DOM事件,以及使用`$emit`、`$broadcast`、`$on`进行事件通信。 11. **AngularJS版本差异**:由于描述提到的是2015年的资料,应注意AngularJS 1.x与后续版本(如Angular 2+...

Global site tag (gtag.js) - Google Analytics