directive多指令之间的异步调用
在 一个angular项目中,directive的使用往往为你项目后期的优化带来了很多方便, 对于directive我想我已经写过很多了,但是有的童鞋就会好奇地来问我, 这个项目我不用directive也可以实现功能啊,好像并没有什么区别啊,那么问题就来了 保时捷也是车,五菱宏光也是车,你会选择哪辆呢? 而一个angular项目中的directive也正是体现了该项目良好性能的一点 那么今天我们就再来深入探讨一下directive中多指令异步渲染的问题, 先来看代码 angualr.module('myApp').directive('firstTag',function(){ return { //... } }).directive('secondTag',function(){ return { //... } }).directive('thirdTag',function(){ return { //... } }); 这里有三组标签,相互之间是没有关联的,那么接着看 angualr.module('myApp').directive('firstTag',function(){ return { restrict:'AE',replace:true,link:function(scope,element){ angular(element[0]).append('<div></div'); } } }).directive('thirdTag',function(){ return { //... } }); 现在我在第二个标签中动态地加入了一个div标签,link顾名思义就是在controller连接HTMLdom的时候,调用的函数,而这个时候angular已经将都没渲染好了,此时我们加上一个div标签 是完全没有问题的, 那么问题又来了,如果我要加入一个third-tag标签呢? 千万千万记住,不能直接加哦!!!!! 因为我之前已经说了,link是在HTMLdom渲染完成之后才会调用的, 所以当second-tag标签进入link方法后,其实页面上的third-tag已经渲染好了, 不要被我写的顺序所迷惑,这三个标签其实是异步并发渲染的,这一个一定要记住哦 而你这个时候再加入third-tag标签的话,他就真的只是一个标签而已...... 那么问题来了,这个时候我要加入这个third-tag标签应该怎么做呢? 还是看代码 angualr.module('myApp').directive('firstTag',['$compile',function($compile){ return { restrict:'AE',element){ $compile(element)(scope);//将element元素重新放回到HTMLdom中进行渲染 angular.element(element[0]).append('<third-tag></third-tag>'); } } }]).directive('thirdTag',function(){ return { //... } }); 记住一定要使用$compile这个对象,因为它是在link 之前执行的,而我们要将dom进行重新渲染的话,就一定要将该元素重新放回到dom中才可以, 那么有了他,就可以实现directive多标签之间的异步调用了 因为这个点不是很好理解, 所以就这样吧,说多了也不好消化, (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |