`

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-Event-Driven-Architecture:AngularJS 事件驱动架构

    AngularJS 事件驱动架构 AngularJS 事件驱动架构

    AngularJS事件日历/计划程序

    带有拖放支持的日/周AngularJS事件日历/计划程序。 PHP和ASP.NET MVC后端。

    Angularjs 事件指令详细整理

    主要介绍了Angularjs 事件指令详细整理的相关资料,这里对AngularJS 的所有的事件指令一一做出详细介绍,需要的朋友可以参考下

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

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

    AngularJS 事件发布机制

    主要介绍了AngularJS 事件发布机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    AngularJS 事件

    AngularJS 事件 AngularJS 有自己的 HTML 事件指令。 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件。 AngularJS 实例 点我! {{ count }} 隐藏 HTML 元素 ng-hide 指令用于设置应用部分是否可见。...

    EventReg:AngularJS 事件注册演示

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

    Angularjs-echarts 点击事件

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

    angularJS的点击事件

    将json数据在网页上面显示出来,利用angularjs的点击事件ng-click

    AngularJS 中的事件详解

    本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下

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

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

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

    本文主要介绍AngularJS 事件处理器,这里整理了相关资料和示例代码,有需要的小伙伴可以参考下

    AngularJs权威教程.pdf

    后半部分深入到 AngularJS 应用开发,系统地讨论了服务器通信、事件、架构、动画、本地化、安全、缓存、 移动应用等主题。 本书适合各个层次的 AngularJS 开发人员学习,无论是出于工作需要,还是好奇心的驱使,只要...

    关于 angularJS的一些用法

    AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydown/up/press ng-focus/blur ng-submit 和ng-click一样,都是给dom绑定事件的 需要注意的是,使用...

    AngularJS权威指南.pdf 清晰中文完整版

    AngularJS权威教程是学习AngularJS的公认经典,内容全面,讲解通俗,适合...《AngularJS权威教程》后半部分深入到AngularJS应用开发,系统地讨论了服务器通信、事件、架构、动画、本地化、安全、缓存、移动应用等主题。

    AngularJS实现动态添加Option的方法

    主要介绍了AngularJS实现动态添加Option的方法,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下

    angularJS权威指南

    本书是学习 AngularJS 的公认经典,内容全面,讲解通俗,适合各层次的学习者。...本书 后半部分深入到 AngularJS 应用开发,系统地讨论了服务器通信、事件、架构、动画、本地化、安全、缓存、 移动应用等主题。

    pubnub-angular:官方 PubNub AngularJS SDK

    委托方法接受triggerEvents选项,该选项将某些回调作为 AngularJS 事件广播。 一个对象,它将 PubNub 频道无缝绑定到一个范围变量,该变量使用实时数据进行更新,并允许您通过专用方法与频道进行交互。 一个对象...

Global site tag (gtag.js) - Google Analytics