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

2024-09-01 01:09:41

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

最新文章

热门文章