AnularJS1事件

在Web应用的组件是松耦合的情况下,比如需要用户验证然后处理授权,即时的通信不总是可行的,因为组件没有耦合在一起。

例如,如果后端对一个请求返回了状态码401(表明一个未经授权的请求),我们期望Web应用不允许用户停留在当前视图,在这种情况下,我们希望应用把用户重定向到登录或者注册页面去。

基于这个逻辑,我们不能从外部告诉控制器设置一个新地址。我们也希望这个功能能覆盖多个作用域,这样可以用相同的行为来保护这些作用域。

我们需要另一种方式在它们之间通信。

AngularJS的作用域在本质上是分层次的:它们可以通过父子关系很自然地来回沟通。但通常,作用域是不共享变量的,它们执行的功能往往各不相同,跟在父树上的位置无关。

在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通信。

什么是事件

如同浏览器相应浏览器层的事件,比如鼠标点击、页面滚动那样,Angular应用也可以响应Angular事件。这使我们可以在应用层中嵌套的各组件之间进行通信,即使这些组件在创建时并未考虑到其他组件。

注意,Angular事件系统并不与浏览器的事件系统相通,这意味着,我们只能在作用域上监听Angular事件而不是DOM事件。
我们可以认为,事件是在应用中传播的信息片段,通常(可选)包含了应用中发生的事情的信息。

事件传播

因为作用域是有层次的,所以我们可以在作用域链上传递事件。
通常说来,选择要使用的事件传递方式,一个好的经验法则是:查看将要触发事件的作用域。如果要通知整个事件系统(允许任意作用域处理这个事件),就要往下广播。
另一方面,如果要提醒一个全局模块(为了说),我们最终需要通知高层次的作用域(例如$rootScope),并且需要把事件向上传递。
比如,当我们在做路由的时候,“全局”应用状态需要知道应用当前设置了哪个页面。另一方面,如果我们是在一个选项卡指令和它的子面板指令之间通信,就需要把事件向下传。

使用$emit来冒泡事件

要把事件沿着作用域链向上派送(从子作用域到父作用域),我们要使用$emit()函数。

//发送一个事件
//当们的用户以当前user登录了
scope.$emit(‘user:logged_in’, scope.user);

在一个emit()事件函数的调用中,事件从子作用域冒泡到父作用域。在产生事件的作用域之上的所有作用域都会收到这个事件的通知。当想要跟应用的其他部分交流状态的变更时,我们使用emit()事件函数的调用中,事件从子作用域冒泡到父作用域。在产生事件的作用域之上的所有作用域都会收到这个事件的通知。 当想要跟应用的其他部分交流状态的变更时,我们使用emit()使emit()。如果想要跟rootScope通信,需要rootScope通信,需要rootScopeemit()这个事件。
$emit()方法带有两个参数。
1.name(字符串)
要发出的事件名称。
2.args(集合)
一个参数的集合,作为对象传递到事件监听器中。
emit()方法返回了一个事件对象从监听器中发出的一切异常都会传递到emit()方法返回了一个事件对象 从监听器中发出的一切异常都会传递到emit()exceptionHandler服务中。

使用$broadcast向下传递事件

要把事件向下传递(从父作用域到子作用域),我们使用$broadcast()函数。

//等等,购物车去结账了
//当购物车在结账的时候
//下面所有的指令都应当禁用自己
scope.broadcast(′cart:checkingout′,scope.cart);在broadcast('cart:checking_out',scope.cart); 在broadcast(cart:checkingout,scope.cart);broadcast()方法上,每个注册了监听器的子作用域都会收到这个信息。事件传播到所有的指令和当前作用域的间接作用域上,并且一路往下调用每个监听器。
用了$broadcast()方法之后,就设法取消事件的发送了。
$broadcast()方法自身带有两个参数。
1.name(字符串)
要发出的事件名称
2.args(集合)
一个参数的集合,作为对象传递到事件监听器中。
emit()方法返回了一个事件对象从监听器中发出的一切异常都会传递到emit()方法返回了一个事件对象 从监听器中发出的一切异常都会传递到emit()exceptionHandler服务中。

事件监听

要监听一个事件,我们可以使用$on()方法。这个方法为具有某个特定名称的事件注册了一个监听器。事件名称就是在Angular中触发的事件类型。
例如,我们可以在路由变更过程被触发时,监听事件:

$scope.on('$routeChangeStart',function(evt, next, current){//一个新的路由被触发了
});
不管什么时候事件$routeChangeStart被触发,监听器都会被调用。
Angular把evt对象作为第一个参数传给正在监听的一切事件,不管它是我们自定义的事件还是内置的Angular服务

事件对象

事件对象有以下属性。
1.targetScope(作用域对象)
这个属性是发送或者广播事件的作用域。
2.currentScope(作用域对象)
这个对象包含了当前处理事件的作用域
3.name(字符串)
这个字符串是触发之后,我们正在处理的事件名称。
4.stopPropagation(函数)
stopPropagation()函数取消通过$emit触发的事件的进一步传播。
5.preventDefault(函数)
preventDefault把defaultPrevented标志设置为true。尽管不能停止事件的传播,我们可以告诉子作用域无需处理这个事件
6.defaultPrevented(布尔值)
调用preventDefault()会把defaultPrevented设置为true。
$on()函数返回了一个反注册函数,我们可以调用它来取消监听器。

事件相关的核心服务

Angular核心框架发送事件,我们监听之后执行操作。可以用事件来让自己的Angular对象能在全局事件的不同状态上与应用交互。
我们用emit()调用的有好几个事件,它们把事件往上发,更多调用的是emit()调用的有好几个事件,它们把事件往上发,更多调用的是emit()broadcast()事件。

核心系统的emitted事件下面的事件从指令向上发送到包含指令调用的作用域。我们可以使用emitted事件 下面的事件从指令向上发送到包含指令调用的作用域。我们可以使用emitted使on()在这个链网上的任意作用域里监听这些方法:

$scope.$on('includeContentLoaded',function(evt){});1.$includeContentLoaded$includeContentLoaded事件当ngInclude的内容重新加载时,从ngInclude指令上触发。2.$includeContentRequested$indeludeContentRequested事件从diaoyongfngInclude的作用域上发送。每次ngInclude的内容被请求时,它都会被发送。3.$viewContentLoaded$viewContentLoaded事件每当ngView内容被重新加载时,从当前ngView作用域上发送.

核心系统的broadcast事件1.broadcast事件 1.broadcast1.loacationChangeStart
当Angular从loacation服务对浏览器的的地址作更新时,会触发loacation服务对浏览器的的地址作更新时,会触发loacationlocationChangeStart事件.
2.loacationChangeSuccess当且仅当浏览器的地址成功变更,又没有阻止loacationChangeSuccess 当且仅当浏览器的地址成功变更,又没有阻止loacationChangeSuccess,locationChangeStart事件的情况下,locationChangeSuccess事件会从locationChangeSuccess事件会从locationChangeSuccessrootScope事件会从rootScope上广播出来.3.rootScope上广播出来. 3.rootScope广.3.routeChangeStart
在路由变更发生之前,routeChangeStart事件从routeChangeStart事件从routeChangeStartrootScope发送出来。也就是在路由服务器开始解析路由变更所需的所有依赖项时。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java基础学习总结(8)——super关键字

2019独角兽企业重金招聘Python工程师标准>>> 一、super关键字 在JAVA类中使用super来引用父类的成分,用this来引用当前对象,如果一个类从另外一个类继承,我们new这个子类的实例对象的时候,这个子类对象里面会有一个父类…

conda镜像

转自https://blog.csdn.net/guilutian0541/article/details/81004769 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main conda config --set show…

Java基础学习总结(17)——线程

2019独角兽企业重金招聘Python工程师标准>>> 一、线程的基本概念 线程理解:线程是一个程序里面不同的执行路径 每一个分支都叫做一个线程,main()叫做主分支,也叫主线程。 程只是一个静态的概念,机器上的一个.class文件…

(转)MySQL自带的性能压力测试工具mysqlslap详解

mysqlslap 是 Mysql 自带的压力测试工具,可以模拟出大量客户端同时操作数据库的情况,通过结果信息来了解数据库的性能状况 mysqlslap 的一个主要工作场景就是对数据库服务器做基准测试 例如我们拿到了一台服务器,准备做为数据库服务器&#x…

node.js HelloWord

创建 server.js var http require("http"); http.createServer(function(req,res){ //设置请求头的编码格式 res.writeHead(200,{Content-Type:text/html;charsetutf-8}); //设置网页的编码格式&#xff08;防止中文乱码&#xff09; res.write("<head>&…

JavaScript --- this

介绍: this:引用环境执行的环境对象arguments:一个类数组对象,它包含传入函数的所以参数callee:arguments对象的一个属性,该属性是一个指针,指向拥有arguments对象的函数caller:保存着调用当前函数的函数引用apply()方法:第一个参数是作用域&#xff0c;第二个参数是Array实例…

LeetCode Subarray Sum Equals K

原题链接在这里&#xff1a;https://leetcode.com/problems/subarray-sum-equals-k/description/ 题目&#xff1a; Given an array of integers and an integer k, you need to find the total number of continuous subarrays whose sum equals to k. Example 1: Input:nums …

水木告白工作室:Java从零入门之模仿头条资讯(一)

总体设计 一 &#xff1a;Java语言基础 二 &#xff1a;Spring入门&#xff0c;模板语法和渲染 三 &#xff1a;数据库交互iBatis集成 四&#xff1a; 用户注册 登陆 管理 五&#xff1a; 资讯发布 图片上传 资讯首页 六&#xff1a; 评论中心 站内信 七&#xff1a; Redis入门…

架构师不可不知的十大可扩展架构

2019独角兽企业重金招聘Python工程师标准>>> 可扩展性正是如今软件设计领域最值得优先考虑的要素。然而&#xff0c;计算机科学家们还无法了解一套单独的架构如何才能扩展至各类应用环境当中。相反&#xff0c;我们在数量繁多的方案中所设计出的可扩展性架构&#x…

Winform开发框架中工作流模块的业务表单开发

在我们开发工作流的时候&#xff0c;往往需要设计到具体业务表单信息的编辑&#xff0c;有些是采用动态编辑的&#xff0c;有些则是在开发过程中处理的&#xff0c;各有各的优点&#xff0c;动态编辑的则方便维护各种各样的表单&#xff0c;但是数据的绑定及处理则比较麻烦&…

JavaScript --- 跨浏览器的事件处理程序

var EventUtil {addHandler: function(element, type, handler) { // 添加事件处理程序if (element.addEventListener) { // DOM2级事件处理程序element.addEventListener (type, handler, false) ;} else if (element.attachEvent) { // IE事件处理程序element.attachEve…

RabbitMQ学习总结(2)——安装、配置与监控

2019独角兽企业重金招聘Python工程师标准>>> 一、安装 1、安装Erlang 1&#xff09;系统编译环境&#xff08;这里采用linux/unix 环境&#xff09; ① 安装环境 虚拟机&#xff1a;VMware Workstation 10.0.1 build Linux系统&#xff1a;CentOS6.5 rabbitMQ官网下…

nginx针对某个url限制ip访问,常用于后台访问限制

nginx针对某个url限制ip访问&#xff0c;常用于后台访问限制 假如我的站点后台地址为&#xff1a; http://www.abc.net/admin.php 那么我想限制只有个别ip可以访问后台&#xff0c;那么需要在配置文件中增加&#xff1a;location ~ .*admin.* {allow 1.1.1.1;allow 12.12.12.0/…

JavaScript --- 跨浏览器的事件对象

var EventUtil{addHandler: function(element, type, handler){ // 添加事件方法if (element.addEventListener){element.addEventListener(type, handler, false); // 添加监听事件,第3个参数false代表:冒泡阶段} else if (element.attachEvent) {element.attachEvent("…

第一个C#程序

第一个C#程序 新建项目-选择模板--控制台应用程序 还不会用学习版执行程序,没找到执行(不调试)菜单,调试出一堆线程状况.用了VS旗舰版完成, 看见C#在VS中的编译和执行时分开的,eclipse确实叫预编译软件,代码写好没错可以直接运行,编译由eclipse完成, 提问:为啥VS不这样设置?是…

XML序列化与反序列化

C#对于XML的序列化与反序列化提供了很好的支持&#xff0c;我们只需要引用System.Xml的命名空间即可&#xff0c;无需使用第三方库&#xff0c;下面简单实现了一个XML的序列化与反序列化的帮助类。 1.序列化&#xff1a; 先声明一个变量var settings new XmlWriterSettings&am…

CODE[VS] 3411 洪水

题目描述 Description小浣熊松松和朋友到野外露营&#xff0c;没想到遇上了&pi;年一次的大洪水&#xff0c;好在松松是一只爱观察的小浣熊&#xff0c;他发现露营地的地形和洪水有如下性质&#xff1a; ①露营地可以被看做是一个N*M的矩形方阵&#xff0c;其中左上角坐标为…

JavaScript --- 取得鼠标事件的坐标

说明: clientX和clientY属性&#xff1a;事件发生时,鼠标指针在视口中的水平和垂直坐标。pageX和pageY属性&#xff1a;鼠标光标在页面中的位置。screenX和screenY属性&#xff1a;鼠标事件发生时&#xff0c;鼠标指针相对于整个屏幕的坐标信息。IE8及更早的版本不支持事件对象…

JavaScript语义基础

变量&#xff08;Variables&#xff09; Variables是你存储数据的容器。声明一个变量需要使用关键字var&#xff0c;然后输入变量的名称。 1 var myvar; 定义一个变量后&#xff0c;可以赋予变量一个值&#xff1a; 1 myvar "mxp"; 可以将上述操作写在一行&#x…

spring面试专题一点通,再也不用担心面试不会回答了

前言文章内容有点小长&#xff0c;希望你能耐心阅读&#xff0c;更多Java面试题以及学习资料获取方式&#xff1a;加Qun:1017-599-436免费获取。还有更多包括电子书&#xff0c;PDF文档以及视频精讲可以分享给大家&#xff0c;内容覆盖很广&#xff0c;分布式缓存、RPC 调用、Z…