`
huangyongxing310
  • 浏览: 494574 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

$on、$emit和$broadcast的使用

阅读更多
$on、$emit和$broadcast的使用



如何在作用域之间通信
1.其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信(通过服务来进行数据的共享)
2.另外一个选择:通过作用域中的事件处理通信。(以下就是这种方式)



$on、$emit和$broadcast使得event、data在controller之间的传递变的简单
1.$emit只能向parent controller传递event与data
2.$broadcast只能向child controller传递event与data
3.$on用于接收event与data //

<div ng-controller="ParentCtrl">                <!--父级-->
    <div ng-controller="SelfCtrl">              <!--自己-->
        <a ng-click="click()">click me</a>
        <div ng-controller="ChildCtrl"></div>   <!--子级-->
    </div>
    <div ng-controller="BroCtrl"></div>         <!--平级-->
</div>

app.controller('SelfCtrl', function($scope) {
    $scope.click = function () {
        $scope.$broadcast('to-child', {A:"A",B:"b"});		//to-child是事件名称,child为数据(可以为一个对象)
        $scope.$emit('to-parent', 'parent');			//
    }
});

app.controller('ParentCtrl', function($scope) {
    $scope.$on('to-parent', function(event,data) {
        console.log('ParentCtrl', data);       //父级能得到值
    });
    $scope.$on('to-child', function(event,data) {
        console.log('ParentCtrl', data);       //子级得不到值
    });
});

app.controller('ChildCtrl', function($scope){
    $scope.$on('to-child', function(event,data) {
        console.log('ChildCtrl', data);         //子级能得到值
    });
    $scope.$on('to-parent', function(event,data) {
        console.log('ChildCtrl', data);         //父级得不到值
    });
});

app.controller('BroCtrl', function($scope){
    $scope.$on('to-parent', function(event,data) {
        console.log('BroCtrl', data);          //平级得不到值
    });
    $scope.$on('to-child', function(event,data) {
        console.log('BroCtrl', data);          //平级得不到值
    });
});



相关事件API
1.event.targetScope,发出或者传播原始事件的作用域
2.event.currentScope,目前正在处理的事件的作用域
3.event.name,事件名称
4.event.stopPropagation(),一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
5.event.preventDefault(),这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
6.event.defaultPrevented,如果调用了`preventDefault`则为true

分享到:
评论

相关推荐

    AngularJS $on、$emit和$broadcast的使用

    2. 使用$on、$emit和$broadcast方法:AngularJS通过事件系统提供了一种在作用域之间通信的方式,这种方法不需要手动管理服务。 - $emit方法用于从当前作用域向上冒泡事件到父作用域。当你在子作用域中调用$scope.$...

    Angular中$broadcast和$emit的使用方法详解

    Angular中$broadcast和$emit的使用方法详解 Angular是一个流行的前端框架,它提供了许多强大的功能来帮助开发者快速构建应用程序。在Angular中,有两个重要的方法:$broadcast和$emit,它们都是用于在控制器之间...

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

    合理使用$broadcast、$emit和$on方法,可以有效地管理复杂的页面逻辑和事件处理。这对于构建动态的、交互性强的web应用来说是十分重要的。在实际开发过程中,开发者应根据具体的应用场景,选择合适的事件广播方式,...

    vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( ...

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

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

    ng-event-scope:添加对级联角度事件的支持

    这扩展了 $rootScopeProvider 以创建一个 $scope 隔离,使用 $emit 和 $broadcast 方法装饰以在:冒号上拆分事件。 可以在找到实现的变化。 一个真正应该作为测试的使用示例 ngModule . run ( function ( $...

    PHP的WebSocket类库php-ws.zip

    实现基于Websocket 协议的 PHP类库 和 javascript类库 , 实现事件 回调函数的架构开发,以一个简单聊天室实例介绍其使用方法: 不同浏览器,不同电脑,不同地域, 实时通讯。实现的详细 请研究源码。 /***服务端*...

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

    AngularJS提供了一种优雅的方式来处理Controller间的通信,主要依赖于Scope的事件机制,包括`$broadcast`、`$emit`和`$on`。 1. **事件机制**: - **$on**:这是AngularJS中的事件监听器,用于注册事件处理函数。...

    Vue2.0组件间数据传递示例

    使用$on()监听事件; 使用$emit()在它上面触发事件; 使用$dispatch()派发事件,事件沿着父链冒泡; 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见...

    angularJS实现不同视图同步刷新详解

    本篇文章将深入探讨如何使用AngularJS的事件传播机制,即`$on`、`$broadcast`和`$emit`,来实现这一功能。 首先,让我们了解`Controller`在AngularJS中的地位。Controller是模型(Model)和视图(View)之间的纽带...

    ngMessage:用于角度、功能强大且简单使用的消息,例如 asyncpromise

    2.message for angular, different with $scope.$emit/$broadcast 3.use single service(like message center) to register and send. 3.currently support promise and mulit message. 4.more demo can see app.js ...

    vue.js入门(3)——详解组件通信

    3. 使用$dispatch和$broadcast进行事件派发和广播 在Vue实例中,子组件可以通过$dispatch沿着父链向上派发事件,而父组件可以通过$broadcast将事件向下广播给所有后代组件。这种方式在Vue2.0之后已经不推荐使用。 4...

    AngularJS控制器之间的数据共享及通信详解

    - **无直接关联的控制器**:可以利用 `$rootScope` 使用 `$emit` 和 `$broadcast` 来传递数据。 - **父控制器到子控制器**:父控制器使用 `$scope.$broadcast()` 方法广播数据,子控制器通过 `$scope.$on()` 方法...

    Vue2.0 事件的广播与接收(观察者模式)

    在 Vue2.0 中,可以使用 `$emit`、`$on` 和 `$off` 三个方法来实现事件的广播和接收。`$emit` 方法用于触发事件,`$on` 方法用于监听事件,`$off` 方法用于取消监听事件。 官方推荐的升级建议是使用集中事件处理器...

    Angularjs实现控制器之间通信方式实例总结

    AngularJS提供了 `$emit`、`$broadcast` 和 `$on` 三个方法来处理事件。 1. **$emit** 用于**向上冒泡**事件,即从当前作用域向其父作用域传播事件。这通常用于子控制器向父控制器传递信息。例如: ```javascript...

    Vue组件通信之Bus的具体使用

    在Vue 2.0中,$dispatch和$broadcast已经被弃用,官方文档中建议使用事件中心来实现非父子组件的通信。 首先,我们需要了解什么是Bus。Bus是一种事件分发机制,它允许组件之间进行通信。我们可以通过实例化一个空的...

Global site tag (gtag.js) - Google Analytics