在 一个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 {
//...
}
}).directive('secondTag',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',function(){
return {
//...
}
}).directive('secondTag',['$compile',function($compile){
return {
restrict:'AE',
replace:true,
link:function(scope,element){
$compile(element)(scope);//将element元素重新放回到HTMLdom中进行渲染
angular.element(element[0]).append('<third-tag></third-tag>');
}
}
}]).directive('thirdTag',function(){
return {
//...
}
});
记住一定要使用$compile这个对象,因为它是在link 之前执行的,而我们要将dom进行重新渲染的话,就一定要将该元素重新放回到dom中才可以,
那么有了他,就可以实现directive多标签之间的异步调用了
因为这个点不是很好理解,
所以就这样吧,说多了也不好消化,,,,,,