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

 

Angularjs的那些事 – 视图的生命周期的更多相关文章

  1. iOS10 UI教程视图的生命周期

    iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...

  2. ios开发----视图的生命周期

    熟悉web开发的朋友可能对页面page的生命周期有一定的了解和认识,正如web开发中的页面生命周期一样,移动客户端开发也有它自己的生命周期.下文将说明ios开发中视图的生命周期既运行顺序. 在ios视 ...

  3. 玩转iOS开发 - 视图控制器生命周期

    视图控制器生命周期

  4. (5/18)重学Standford_iOS7开发_视图控制器生命周期_课程笔记

    第五课: 1.UITextView @property (nonatomic, readonly) NSTextStorage *textStorage;//注意为只读属性,因此不能直接更改内容,NS ...

  5. [iOS]应用与视图的生命周期和方法调用

    1.应用程序的生命周期: AppDelegate类在应用生命周期的不同阶 会回调不同的方法. 视图push到了子界面,然后子界面pop回原界面的时候,会启用viewWillAppear以及之后的几个生 ...

  6. 视图控制器生命周期中各个重要的方法(Swift) (Important Methods during the Lifecycle of a View Controller)

    1. init(coder:) 它是视图控制器从故事板创建实例的默认初始化函数.(It is the initializer for UIViewController instances create ...

  7. OC开发_Storyboard——视图控制生命周期以及NSNotifications

    一.生命周期 1.ViewDidLoad: 一般的初始化,除了几何图形的初始化(这个时候还没确定) 2.ViewWillAppear: 代表你的视图将要在屏幕上显示,可能会调用多次,对不可见时可能能改 ...

  8. iOS 视图控制器生命周期

    1.init: 2.viewDidLoad: 3.viewWillAppear: 4.viewDidAppear: 5.viewWillDisappear; 6.viewDidDisappear

  9. UI—视图的生命周期

随机推荐

  1. go语言学习-函数

    函数声明 函数声明包括函数名,形参列表,返回值列表(可选),函数体组成 func test(parameters) (returns) { // ... } 其中 parameters 就是函数的形参 ...

  2. 利用Solr服务建立的站内搜索雏形

    最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀.总觉着之前搭建的nutch配上solr还是有点呆板,在nutch爬取的时候就建立索引到solr服务下, ...

  3. BZOJ.1927.[SDOI2010]星际竞速(无源汇上下界费用流SPFA /最小路径覆盖)

    题目链接 上下界费用流: /* 每个点i恰好(最少+最多)经过一次->拆点(最多)+限制流量下界(i,i',[1,1],0)(最少) 然后无源汇可行流 不需要源汇. 注: SS只会连i',求SS ...

  4. 工具使用-----Jmeter教程 简单的压力测试

    摘抄于http://www.cnblogs.com/TankXiao/p/4059378.html 以下是英文版的,中文版的也差不多的 Jmeter是一个非常好用的压力测试工具.  Jmeter用来做 ...

  5. full GC触发的条件

    full GC触发的条件除直接调用System.gc外,触发Full GC执行的情况有如下四种.1. 旧生代空间不足旧生代空间只有在新生代对象转入及创建为大对象.大数组时才会出现不足的现象,当执行Fu ...

  6. java三大特性--继承

    定义: 继承就是子类继承父类的特征和行为,使得子类具有父类的各种属性和方法,使得子类具有父类相同的行为. 继承的好处: 有效实现代码复用,避免重复代码的出现. 让类与类之间产生了关系,是多态的前提. ...

  7. Ansible修改自定义端口和登录用户

    如下所示: [servers] host1 ansible_ssh_host=192.0.2.1 ansible_ssh_port=5555 ansible_ssh_user="user&q ...

  8. ITxlab倡议启动“互联网X大脑”计划

    导语:"互联网X大脑"计划由ITxlab(互联网X实验室)联合科学院相关机构.基于7年以来取得的研究成果,倡议建立的互联网与脑科学前沿研究平台,吸引不同领域专家进行科学研究和成果交 ...

  9. Meclipse alt+/ 没有提示

  10. 在 Gradle 中使用 MyBatis Generator

    在 Intellij IDEA 中结合 Gradle 使用 MyBatis Generator 逆向生成代码 Info: JDK 1.8 Gradle 2.14 Intellij IDEA 2016. ...