文档章节

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

huangjacky
 huangjacky
发布于 2014/10/12 12:21
字数 779
阅读 78
收藏 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组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409 Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体...

冯浩月
2018/08/31
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
Angular 中得 scope 作用域梳理

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

顽Shi
2014/09/21
0
2
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
AngularJS - 下一个大框架

AngularJS AngularJS是web应用的下一个巨头。 AngularJS如果为创建web应用而设计,那它就是HTML的套路了。具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明式模板和出色的可测试性都是用纯客户...

oschina
2014/07/29
16.5K
46

没有更多内容

加载失败,请刷新页面

加载更多

React SSR样式及SEO的实践

前一篇主要记录了一下SSR配置以及结合Redux的使用。这里简单说一下React SSR中样式处理和更优雅的SEO SSR样式 在React客户端渲染,添加样式很容易。写一个css样式文件,在对应组件中引用。标...

前端小攻略
6分钟前
0
0
华为手机太猛!余承东吹的牛今天都实现了

华为是世界上少有的在2B和2C领域同时取得成功公司。如今,华为消费者业务的营收,已经在华为总营收中占据“半壁江山”。 12月27日,华为董事长郭平在新年致辞中披露,预计2018年华为预计实现...

linux-tao
17分钟前
1
0
JSP的Model2模式

整体可以看做是 Request > Control > ( Service > DAO > POJO ) > Response POJO是数据实体类,最佳实践是与数据库物理表相对应,方便用工具进行生成,也易于理解。由于直接与物理表相对应...

max佩恩
25分钟前
0
0
rabbitMQ的使用

RabbitMQ介绍 RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种。 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间...

狼王黄师傅
30分钟前
0
0
面向对象继承

第1章 面向对象 1.1 知识回顾 1.Java中的数据类型 2.引用数据类型String中的方法 3.IO流_读写文件 1.2 面向对象概念回顾 什么叫面向对象编程?有人是这么理解的 也有人说不对,面向对象编程是你...

stars永恒
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部