2019獨角獸企業重金招聘Python工程師標準>>>

在 一個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多標簽之間的異步調用了

因為這個點不是很好理解,

所以就這樣吧,說多了也不好消化,,,,,,

轉載于:https://my.oschina.net/codingBingo/blog/710840

總結

以上是生活随笔為你收集整理的directive多指令之间的异步调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。