文档章节

Angularjs的那些事 – 视图的生命周期

huangjacky
 huangjacky
发布于 2014/10/12 12:21
字数 779
阅读 67
收藏 0
点赞 0
评论 0

Angularjs的最主要的一个应用场景就是单页面应用(SinglePageApplication),但是SPA中会有一个明显的问题,在视图切换的时候,它只会用新视图去替换视图容器内的HTML,但如果旧视图在加载之后动态生成一些DOM元素,而这些新生成的DOM元素并没有在容器内的话,那么视图切换后,这些DOM元素还会存在。因为angular的视图切换是由js来动态完成的,并没有让浏览器去重新加载整个页面。

下面就是一个例子:

总共有两个页面,使用ngRoute来路由。视图容器如下:

其中一个页面是使用xheditor来创建的编辑器,它的工具栏能浮动出一些小框,其实就是动态在body末尾生成一些DOM元素,如下图:

最下面红色框就是新生成的元素,如果我们现在切换回首页视图会怎么样?

这些元素还在的,因此我们需要在离开这个视图的时候清除掉这些DOM元素,那么视图加载到离开都有些什么事件呢?

从官方文档看,ngView只有一个事件$viewContentLoaded,名字是在视图加载完后执行的内容。因此我们来测试如下的代码:

在视图层添加如下代码:

在控制器中添加如下的代码:

 

看下运行的效果:

视图层中的代码率先被执行,然后进入到控制器的逻辑,最后触发$viewContentLoaded。

从上面的代码看,如果我们加载后的事件只需要对DOM进行操作,那么在视图层的script中即可,但是如果需要使用到控制器中的数据的话,就必须在控制器中完成。

进入视图的事件搞定了,那么离开的事件呢?官方文档没有介绍,但是其他文档中我们发现$location和$route有change相关的事件。

代码如下,为了更早的生效,这段代码可以写入到app.js中:

运行结果如下:

我们完全可以在$locationChangeSuccess中判断fromUrl是不是当前视图的hash,如果是然后执行离开视图的操作即可。

同理的事件还有$routeChangeStart和$routeChangeSuccess,其实官方文档中可以看到$route是依赖于$location的,因此我们可以猜测其实他们应该是同一个东西,不同的封装而已罢了。

看如下的代码:

运行结果:

运行结果中需要注意:$routeChangeSuccess事件是在整个新的视图加载完成之后才会执行的。

因此要选择当前视图离开事件的时候,请考虑$locationChangeStart,$locationChangeSuccess,$routeChangeStart

TIPS:这样的离开事件可以在进入视图的时候增加监听,在离开时执行完相应的操作后,取消监听,如下:

搞定了,哈哈。学习交流为主。

最后是本文中使用到的代码:点击下载 angular1.rar

 

本文转载自:http://www.cnblogs.com/huangjacky/p/3693180.html

共有 人打赏支持
huangjacky
粉丝 5
博文 19
码字总数 0
作品 0
深圳
高级程序员
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2
5个示例带你学习AngularJS

本文由 伯乐在线 - 蝈蝈 翻译自 tutorialzine。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。 直到现在,你或许已经听说过AngularJS了,一个改变你对web应用思考方式,由谷歌开发的令...

冬瓜1
2013/12/30
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
5大最流行手机webAPP框架之Ionic

Ionic 框架 Ionic框架是我们前五个web app框架中最年轻的,阿尔法版本是在2013年11月下旬发布的。Ionic是建立在google的AngularJS框架上的,它利用AngularJS来提供应用结构,而它本身更关注的是...

大培哥
2015/10/31
0
0
Angularjs的$apply及其优化使用

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply(),然后就惊喜...

北辰狼月
07/01
0
0
{{AngularJS精华}}有jQuery背景的开发者如何建立起AngularJS的思维模式?

本文由 机器human 编译自 Mark Rajcok 在 StackOverflow 的同名问答题《How do I “think in Angular.js” if I have a jQuery background?》。下面是 Mark Rajcok 的提问: “我可以熟练使用...

顽Shi
2014/05/31
0
0
源码分析 @angular/cdk 之 Portal

Portal 是什么 最近在学习 React 时,发现 React 提供了 Portals 技术,该技术主要用来把子节点动态的显示到父节点外的 DOM 节点上,该技术的一个经典用例应该就是 Dialog 了。设想一下在设计...

lx1036
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Tomcat中JAVA JVM内存溢出及合理配置

一、Java JVM内存介绍 JVM管理两种类型的内存,堆和非堆。按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配。堆是在 Java 虚拟机启动时创...

學無止境
3分钟前
0
0
centOS7.4+nginx 1.12.2负载均衡

centOS7.4+nginx 1.12.2负载均衡 2018年04月10日 09:24:51 阅读数:58 1:参数信息 三台 centOS7.4 A,B,C A作为主服务器,B C作为分流的服务器 都搭建 nginx 1.12.2 一:安装 nginx 1:下载...

linjin200
9分钟前
0
0
分布式之抉择分布式锁

前言: 目前网上大部分的基于zookpeer,和redis的分布式锁的文章都不够全面。要么就是特意避开集群的情况,要么就是考虑不全,读者看着还是一脸迷茫。坦白说,这种老题材,很难写出新创意,博...

Java大蜗牛
14分钟前
0
0
rm: cannot remove `xxx’: Operation not permitted

rm: cannot remove `xxx': Operation not permitted可以先用lsattr xxx查看文件的隐藏属性。如果看到-----a-------的情况,可以用chattr -a xxx去除a属性,然后再进行删除就可以了....

殘留回憶
14分钟前
0
0
oracle 如何查看当前用户的表空间名称

如何查询当前用户的表空间名称?因为oracle建立索引,需要知道当前用户的表空间,查找了一下资料 --查询语法-- select default_tablespace from dba_users where username='登录用户' 如,...

youfen
18分钟前
0
0
MicroPython-TPYBoard开发板DIY小型家庭气象站

对于喜欢登山的人来说,都会非常关心自己所处的高度跟温度,海拔高度的测量方法,海拔测量一般常用的有两种方式,一是通过GPS全球定位系统,二是通过测出大气压,根据气压值算出海拔高度。 ...

bodasisiter
18分钟前
0
0
抓取沪A股票资金流向数据

library(rvest)mydata<-list()day1<-Sys.Date()day2<-Sys.Date()-7stock<-c("600695","600734","603693","601990","603650","603045","603895","600735","601999","603970","600619"......

cuyi
18分钟前
0
0
Java中mqtt消息队列发送和订阅消息

1.首先本地建立mqtt协议的服务器 2.直接上代码 package io.powerx.test;import java.util.Date;import org.eclipse.paho.client.mqttv3.IMqttDeliveryToken;import org.eclipse.p......

江湖鱼大虾
20分钟前
0
0
数据结构-树的学习

1. 相关连接 维基-二叉搜索树 维基-红黑树 思否-红黑树

liuyan_lc
22分钟前
0
0
Dubbo 源码解读——自定义 Classloader 之 ExtensionLoader

众所周知,Dubbo 是阿里巴巴公司自主研发开源的一个高性能的服务框架(现已捐献给 Apache 基金会组织),应用之间可以通过 RPC 的方式来互相调用并返回结果。主要基于 Java 语言开发,它提供...

Ryan-瑞恩
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部