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多标签之间的异步调用了

因为这个点不是很好理解,

所以就这样吧,说多了也不好消化,

directive多指令之间的异步调用

相关文章