`

AngularJS的$emit和$broadcast实例

阅读更多

$emit和$broadcast使得event、data在controller与view之间的传递变的简单。

  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data

实例代码:
AngularEvent.html

<!DOCTYPE html>
<html>
<head>
    <script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/angular.js"></script>
    <script type="text/javascript" src="js/emit-broadcast.js"></script>
    <style>
        .ng-scope {
            border: 1px dotted red;
        }
    </style>
</head>
<body>
<div ng-app="" class="container">
    <div ng-controller="EventController" class="span12">
        Root scope MyEvent count: {{count}}
        <ul>
            <li ng-repeat="i in [1]" ng-controller="AbcController">
                <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
                <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
                <button ng-click="fireEvent()">fireEvent()</button>
                <br>
                Middle scope MyEvent count: {{count}}
                <ul>
                    <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                        - Leaf scope MyEvent count: {{count}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

emit-broadcast.js

function EventController($scope) {
    $scope.count = 0;
    $scope.$on('MyEvent', function() {
        $scope.count++;
    });
}

function AbcController($scope) {
    $scope.fireEvent = function() {
        $scope.$emit('MyEvent');
        $scope.$broadcast('MyEvent');
    };
}

运行效果:

刚打开页面

点击“$emit('MyEvent')”按钮,发现Root和Middle scope下的count变化了,每点击一次加1。

点击“$broadcast('MyEvent')”按钮,发现Leaf scope下的count变化了,每点击一次加1。

点击“fireEvent()”按钮,发现整个scope下的count变化了,每点击一次加1(因为在fireEvent方法中有$emit、$broadcast事件MyEvent)。

 

  • 大小: 78.5 KB
  • 大小: 80 KB
  • 大小: 81.1 KB
  • 大小: 79.7 KB
分享到:
评论

相关推荐

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

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

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

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

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

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

    angularjs 1.X crm 后台管理系统

    总的来说,"angularjs 1.X crm 后台管理系统"资源为开发者提供了一个学习和实践AngularJS的实例,涵盖了前端开发的许多核心技术和最佳实践。通过这个项目,你可以深入了解如何将AngularJS应用于实际的业务场景,提升...

    AngularJS Controller作用域.docx

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

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

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

    AngularJS 0003: 指令

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

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

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

    AngularJS使用拦截器实现的loading功能完整实例

    5. 实现延迟加载逻辑:在AngularJS的控制器或者服务中,当需要发起HTTP请求时,可以使用$rootScope的$broadcast或$emit方法来通知视图层加载指示器开始显示。在HTTP请求被拦截器拦截后,设置$rootScope的loading变量...

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

    AngularJS提供了`$rootScope.$on`、`$rootScope.$emit`和`$rootScope.$broadcast`三个方法来处理事件。`$on`用于注册事件监听器,`$emit`用于向父级作用域发送事件,而`$broadcast`则用于向所有子级作用域广播事件。...

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

    因此,建议仅在必要时使用$rootScope,而对于控制器间的通信,应该优先考虑使用服务(Service)或广播($broadcast)/发射($emit)机制。 在此示例中,我们看到在ng-controller="twoController"的视图中也能访问到...

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

    然而,过度依赖`$rootScope`进行数据通信可能会导致应用变得复杂和难以调试,因此,推荐使用服务(Service)或者`$broadcast`和`$emit`来进行跨控制器的数据共享,以保持应用的整洁和可维护性。

    Angular 案例

    ### Angular 案例知识点详解 #### 一、AngularJS 初始化加载流程 ...通过以上知识点的详细介绍,我们可以更深入地了解AngularJS的工作原理和技术细节,从而更好地利用这些特性来开发高质量的应用程序。

    Angularjs全局变量被作用域监听的正确姿势

    4. **使用事件广播和发布($emit/$broadcast/$on)**:如果只需要在特定的子作用域层级上响应全局变量的变化,可以使用事件机制。$rootScope上的`$broadcast`可以向下传递事件,而`$emit`则向上传递。这种方式提供了...

    AngularJS入门教程之Scope(作用域)

    你可以使用 $on 方法来注册事件监听器,$broadcast 方法向下传播事件(到子作用域),而 $emit 方法则向上传播事件(到父作用域)。这样,不同控制器之间的通信就变得更加灵活。 Scope 的脏检查 AngularJS 使用脏...

    Re-usable-Paging-in-AngularJS:AngularJS 中的可重用分页

    这可以通过 `$emit` 或 `$broadcast` 发送自定义事件来实现。 服务(Services)在AngularJS中用于存储和共享数据,以及执行复杂的任务。我们可以创建一个名为`pagingService`的服务,负责计算每页的数据量、总页数...

    AngularJS 异步解决实现方法

    AngularJS是一款流行的JavaScript框架,用于构建动态的Web...AngularJS的异步解决方案是其强大的特性之一,通过回调函数和事件广播机制,开发者可以轻松地管理不同部分之间的异步交互,从而构建高效、动态的应用程序。

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

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

    sharingdatabetweencontrollers:在Angularjs中的控制器之间共享数据

    4. **事件(Events)**:除了服务,AngularJS还提供了一个事件系统,允许控制器通过`$rootScope.$emit()`, `$broadcast()`, 和 `$on()` 来通信。`$emit` 向父级作用域广播事件,`$broadcast` 向子级作用域广播,而`$...

Global site tag (gtag.js) - Google Analytics