# 書海拾貝之特殊的ng-src和ng-href 在說明這兩個指令的特殊之前，需要先了解一下ng的啟動及執行過程，如下： 1)?瀏覽器加載靜態HTML文件并解析為DOM； 2)?瀏覽器加載angular.js文件； 3)?angular監聽?DOMContentLoaded?事件，監聽到時開始啟動； 4)?angular尋找ng-app指令，確定作用范圍； 5)?找到app中定義的Module使用$injector服務進行依賴注入； 6)?根據$injector服務創建$compile服務用于編譯； 7)?$compile服務編譯DOM中的指令、過濾器等； 8)?使用ng-init指令，將作用域中的變量進行替換； 9)?最后生成了我們的最終視圖。 可以看到，ng框架是在DOMcontent加載完畢后才開始發揮作用。假如我們模板中有一張圖片如下： 那么在頁面開始加載到ng編譯完成之前，頁面上會一直顯示一張錯誤的圖片，因為路徑{{imgUrl}}還未被替換，就像這樣： 為了避免這種情況，我們使用ng-src指令，這樣在路徑被正確得到之前就不會顯示找不到圖片。同理，標簽的href屬性也需要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的鏈接。 順著這個思路再多想一點，我們在模板中使用{{}}顯示數據時，在ng編譯完成之前頁面上豈不是會顯示出大括號及里面的表達式？確實是這樣。為了避免這個，ng中有一個與{{}}等同的指令:ng-bind，同樣用于單向綁定，在頁面剛加載的時候就不會顯示出對用戶無用的數據了。盡管這樣你可能不但沒舒心反而更糾結了，{{}}那么好用易理解，還不能用了不成？好消息是我們依然可以使用。因為我編寫的是單頁面應用，頁面只會在加載index.html的時候出這個問題，只需在index.html中的模板中換成ng-bind就行。其他的模板是我們動態加載的，就可以放心使用{{}}了。