最近在做一個angular js的專案。今早一個早上都在為一個bug發愁,、
是ng-if出現一個彈框,彈框的指令中引用了一個模板,模板中有script腳本,在其他瀏覽器都沒問題,就是在IE8下腳本不執行。
檢視了很多IE8執行腳本的問題,包括在script標籤加defer屬性,但不解決實際問題。
後來發現並不是腳本不能執行,而是在主頁面載入時(ng-if為false彈框沒出現)就執行過了腳本。
網路上都說 ng-if會移除dom,生成dom,而ng-show只是改變其display屬性,
照理說不應該是ng-if="true"的時候才會載入dom,才會執行腳本才對?
但把ng-if改成ng-show以後發現問題突然解決了,在IE8裡面完美的實現了點擊彈框後才執行腳本,
這一點沒想明白是為什麼,有沒有高人可以解答?
bug怎麼解決的我沒看明白,至於angular的解析過程我可以解釋下:
雖然在DOM查看器中我們看到的是angular解析之後的結果,但是實際上是瀏覽器先載入dom元素,然後angular再執行,去查找各種指令,然後解析出結果的。
所以angular有幾個怪癖:ng-bind替換{{ expression }}可以解決花括號閃爍問題,你不能在定義href指令用在a標籤上,等等類似的問題原因都是如此。
ng不是後台模板,對於後台語言來說,模板就是各種字串解析拼接,但是ng是運行在瀏覽器中的,html會先變成dom元素,ng並不是在操縱字串,而是在操縱dom元素。
你在ng-if里和ng-show裡應該都是綁定的controller的model吧?
看你的解決過程,我猜:
ng-if預設是true
ng-show預設是false
所以使用ng-if的時候,模板裡的script會在model還沒運算到的時候先執行
不過這可能也是在ie8上的特殊情況
我有個建議,不要直接把script放在模板裡,例如放到模板的controller裡,這樣用ng-if也可以的