`

AngularJs事件

阅读更多

控制器信息传递的三种方式:

利用$rootScope

Angular JS中的作用域有一个非常有层次和嵌套分明的结构.其中她们都有一个主要的$rootScope然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的。

2.利用service服务

其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信。

3.利用时间传播

事件传播的基本对象

<div ng-controller="parentController">
            parentController
            <ul>
                <li ng-repeat="i in [1]" ng-controller="currentController">
                    <button ng-click="emitEvent()">
                        事件向上传播 $emit('parentEvent')
                    </button>
                    <button ng-click="broadcastEvent()">
                        事件向下传播 $broadcast('sonEvent')
                    </button>
                    <br>
                    currentController
                    <ul>
                        <li ng-repeat="item in [1, 2]" ng-controller="sonController">
                            sonController
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

 

 */
function parentController($scope) {
    // 注册事件的第一个参数是事件对象,第二个是事件传递的参数
    $scope.$on('parentEvent', function(event,paramObj) {
        console.log("parentEvent");
        console.dir(paramObj);
    });
}

function currentController($scope) {
    // 注册事件的第一个参数是事件对象,第二个是事件传递的参数
    $scope.$on('currentEvent', function(event,paramObj) {
        console.log("currentEvent");
        console.dir(paramObj);
    });

    // 触发在当前$scope的父亲$scope对象
    $scope.emitEvent = function(){
        var paramObj = {
            name : "wangyuyong",
            age : 22
        };
        $scope.$emit("parentEvent", paramObj);
    };

    // 触发在当前$scope的子$scope对象
    $scope.broadcastEvent = function(){
        var paramObj = {
            name : "liumei",
            age : 23
        };
        $scope.$broadcast("sonEvent", paramObj);
    };

}

function sonController($scope) {
    // 注册事件的第一个参数是事件对象,第二个是事件传递的参数
    $scope.$on('sonEvent', function(event,paramObj) {
        console.log("sonEvent");
        console.dir(paramObj);
    });
}

 

 

1、$emit 广播给父controller 

2、$broadcast 是从发送者向他的子scope广播一个事件。

3、$emit 广播给父controller,父controller 是可以收到消息

4、$on 有两个参数function(event,msg)  第一个参数是事件对象,第二个参数是接收到消息信息.

 

 
分享到:
评论

相关推荐

    Angularjs 事件指令详细整理

    以下是关于Angularjs事件指令的详细整理知识点: ngClick:ngClick是Angularjs中用于监听元素(如div、button等)的单击事件的指令。当用户点击元素时,ngClick会触发其定义的作用域(scope)上的方法。在Angularjs...

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

    当在非AngularJS事件(如setTimeout或jQuery事件)中改变数据时,需要调用 `$apply()` 来触发脏检查循环($digest loop),以更新视图。$digest循环会遍历所有的watcher,检测模型的变化并执行相应的动作。 6. ** ...

    AngularJS事件日历/计划程序

    **AngularJS事件日历/计划程序** AngularJS是一款由Google维护的前端JavaScript框架,用于构建交互式的单页面应用(SPA)。这个项目是一个基于AngularJS的日/周事件日历和计划程序,它提供了拖放功能,使得用户能够...

    AngularJS 事件发布机制

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

    ng-warehouse:带有 AngularJS 事件的数据缓存

    ng-仓库 v0.2.0 带有 AngularJS 事件的数据缓存。演示 angular . module ( 'demoApp' , [ 'data.warehouse' ] ) . controller ( 'DemoCtrl' , [ '$scope' , 'warehouse' , 'store2' , function ( $scope , warehouse...

    AngularJS的浏览器插件ng-inspector.zip

    4. **事件监听**:开发者可以通过插件查看哪些DOM元素绑定了AngularJS事件,如`ng-click`,这对于优化交互和解决事件处理问题非常有用。 5. **脏检查检测**:AngularJS的脏检查机制($digest cycle)有时可能会导致...

    AngularJs 参考手册PDF

    ### AngularJS事件 AngularJS支持各种事件,这些事件可以在指令中绑定,以实现丰富的交互效果: - `ng-click`、`ng-dbl-click`: 点击和双击事件。 - `ng-mousedown`、`ng-mouseenter`、`ng-mouseleave`、`ng-...

    AngularJS中实现动画效果的方法

    ngAnimate模块主要的工作原理是在检测到特定的AngularJS事件时,自动为HTML元素添加或移除特定的CSS类。ngAnimate监听的事件包括但不限于元素的显示、隐藏、添加到DOM中、从DOM中移除等。为了实现不同的动画效果,...

    EventReg:AngularJS 事件注册演示

    angular-seed — AngularJS 应用程序的种子 这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含 AngularJS 库、测试库和一堆脚本...

    AngularJS 事件

    在本篇内容中,我们将深入探讨AngularJS中的事件处理,特别是`ng-click`和`ng-hide`以及其对应的`ng-show`指令。 首先,`ng-click`指令是AngularJS提供的一个核心事件处理指令,它允许我们在用户点击HTML元素时执行...

    Angularjs-echarts 点击事件

    Angular-echarts是 wangshijun对echarts利用Angular封装的组件,github地址https://github.com/wangshijun/angular-echarts。附件只是在源码例子里上添加了点击事件。

    angularJS的点击事件

    在这个主题“AngularJS的点击事件”中,我们将深入探讨如何利用AngularJS的`ng-click`指令来处理用户的点击事件,并结合JSON数据在网页上展示信息。 1. **`ng-click`指令**: `ng-click`是AngularJS中的一个内置...

    AngularJS 入门教程之事件处理器详解

    在本入门教程中,我们将详细探讨AngularJS事件处理器的使用方法,并通过具体的代码示例进行说明。事件处理器在AngularJS中通常是通过指令(Directives)来实现的,最常用的一个指令是`ng-click`,它用于处理HTML元素...

    batarang.7z

    6. **事件追踪**:可以追踪AngularJS事件的触发,帮助开发者理解事件传播路径和行为。 从文件名称列表来看,只有一个文件"batarang",这可能是Batarang的安装文件或打包文件。安装这个工具通常需要解压后放入Chrome...

    AngularJS学习 chm 文件

    这些指令扩展了HTML的功能,例如ng-repeat用于循环渲染数据,ng-if进行条件渲染,ng-click处理点击事件等。 3. **依赖注入**:AngularJS 的依赖注入(Dependency Injection, DI)机制可以自动管理对象之间的依赖...

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第024讲 事件处理指令讲解.mp4 ├最新AngularJS开发宝典—第025讲 AngularJS+flex弹性盒模型+bootStrap 开发微信菜单前端之手机界面预览.mp4 ├最新AngularJS开发宝典—第026讲 AngularJS+...

    AngularJS+ NodeJS

    1. **事件驱动**:基于事件循环的非阻塞I/O模型,提高了性能和效率。 2. **模块化**:使用CommonJS规范,通过require和module.exports实现模块导入导出。 3. **npm包管理器**:拥有庞大的第三方库生态系统,加速开发...

    AngularJS1.x快速入门

    - **传统方法**:通过监听键盘事件并手动更新DOM。 - **AngularJS方法**:利用数据双向绑定特性,通过`ng-model`指令直接在HTML中实现。 ```html 输出记录:{{info}} ``` - **需求案例1**:实现一个...

    Angularjs_in_action

    AngularJS通过内置的数据绑定机制实现了模型与视图之间的自动同步,这意味着开发者无需手动编写复杂的事件监听器来保持视图与模型的一致性。这种特性极大地提高了开发效率并减少了出错的机会。 #### 七、指令系统 ...

Global site tag (gtag.js) - Google Analytics