`
hudeyong926
  • 浏览: 2028403 次
  • 来自: 武汉
社区版块
存档分类
最新评论

angularjs $broadcast $emit $on 事件触发controller间的值传递

 
阅读更多

用angularjs,发现controller间的值传递,比较麻烦的,以后几篇文章会陆续说几种方法。

一,angularjs $broadcast $emit $on的处理思想

在一个controller里面通过事件触发一个方法,在方法里面通过$broadcast或$emit来定义一个变量,在父,子controller里面通过$on来获取。

 

二,实例说明angularjs $broadcast $emit $on的用法1,html代码

<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>

 2,js代码

phonecatControllers.controller('SelfCtrl', function($scope) {
    $scope.click = function () {
        $scope.$broadcast('to-child', 'child');
        $scope.$emit('to-parent', 'parent');
    }
});

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

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

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

 3,点击Click me的输出结果

child  
parent

用$broadcast赋的值,只能子级得到值;$emit赋的值,只能父级得到;而平级的什么都不能得到

分享到:
评论

相关推荐

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

    总结来说,AngularJS中Controller间的通信主要有三种方式:作用域继承、事件广播(`$on`、`$emit`、`$broadcast`)以及服务。根据项目需求和性能考虑,可以选择最适合的方式来实现不同Controller之间的数据交互。在...

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

    AngularJS的Controller间通信主要通过Scope的事件机制实现,包括`$on`监听事件、`$emit`自顶向下广播事件和`$broadcast`自底向上广播事件。这种机制允许Controller在不直接依赖的情况下相互通信,但应谨慎使用以...

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

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

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

    父Controller的`$broadcast`方法将事件传递给它的所有子Controller,包括Bctl Controller。Bctl Controller可以通过`$on`监听这个`'childFresh'`事件,执行相应的处理函数,如`$scope.$on('childFresh', function...

    AngularJS 0005:作用域

    `$emit`用于向父作用域发送事件,`$broadcast`用于向所有子作用域发送事件,`$on`用于注册事件监听器。 总的来说,AngularJS的作用域是数据模型和视图之间的重要连接,它提供了一种高效的数据绑定机制和事件通信...

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    1. `$on(name, handler)`:注册一个事件监听器,当指定的事件在当前作用域被触发时,`handler`函数会被调用。 2. `$emit(name, args)`:从当前作用域开始,向其父级作用域发送一个事件,直到根`$rootScope`。事件...

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

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

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

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

    angularjs笔试题

    - **Events**: 利用 `$broadcast`, `$emit`, `$on` 等方法来发送和接收事件。 - **$rootScope**: 使用 `$rootScope` 来实现跨控制器的数据共享。 - **Controller**: 控制器之间可以直接使用 `$parent` 或 `$...

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

    6. 控制器间通信:使用 $emit 和 $broadcast 来实现父子控制器之间的事件和数据传递。 通过理解并应用这些知识点,开发者可以更加灵活地控制 AngularJS 应用中的数据流和视图更新,创建更加动态和响应用户交互的...

    AngularJS开发教程之控制器之间的通信方法分析

    其中,$on用于监听事件,$emit用于向父作用域触发事件,$broadcast则用于向子作用域广播事件。这种方式允许控制器间进行更加灵活和复杂的通信,特别是当需要在非直接父子关系的控制器间进行通信时非常有用。例如,若...

    Angular 案例

    3. **等待`DOMContentLoaded`事件触发**:AngularJS会监听`DOMContentLoaded`事件,确保DOM完全加载后再继续后续处理。 4. **查找`ng-app`指令**:AngularJS会在DOM中查找`ng-app`指令,该指令定义了AngularJS应用...

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

    通过`$emit`方法,事件可以从当前Scope向上冒泡到父Scope;通过`$broadcast`方法,事件可以向下传播到所有的子Scope。`$on`方法用于注册事件监听器。这种事件机制使得不同Scope之间的通信变得简单,尤其在处理组件间...

    学习Angular中作用域需要注意的坑

    - 理解并合理利用`$scope.$new()`和`$scope.$emit/$broadcast`来创建新作用域或通信。 - 对于复杂的数据结构,考虑使用`$scope.$watchGroup`或`$scope.$watchCollection`来更有效地监控变化。 总的来说,深入理解...

Global site tag (gtag.js) - Google Analytics