超鏈結及圖片幾乎是每個網頁中都會有的，在開始應用系統時，也許會遇到鏈結的位置或是圖片依某些值的不同而改變。在用 jQuery 時會需要自己動手來改變這些內容，但在 AngularJS 中則只要透過資料的綁定後，接下來就都交給 AngularJS 來幫我們處理囉。
先準備個練習用的 HTML 語法：
1 2 3 4 5 6 7 8 9 10 | <div class="span5" style="margin-top:20px;" ng-init="guess='guess.png';"> <div class="alert"> <button class="btn btn-primary" ng-click="guess='abgne.tw.jpg';">圖片改為 abgne.tw.jpg</button> <button class="btn btn-primary" ng-click="guess='guess.png';">圖片改為 guess.png</button> </div> <div class="alert alert-success"> <a href="img/guess.png">瀏覽圖片</a> </div> </div> |
現在網頁中的超鏈結是固定為 "img/guess.png"，若筆者想讓它依 guess 來改變的話，各位可能會直接用 Angular 表達式(Angular Expressions)來這麼寫：
1 | <a href="img/{{ guess }}">瀏覽圖片</a> |
預覽時可以透過開發者工具來看到鏈結的真實位置：
然後按下第一個按鈕後的鏈結位置也跟著改變：
當一切都是很順利時，看起來都很美好。不過若是 angular.js 沒有載入成功或是還沒載入完的話，那麼看到的鏈結就會是...
因為它有 href 屬性，所以對於瀏覽器來說就是一個正常的超鏈結，因此就會有鏈結功能，然後使用者點擊後就出現 404 找不到網頁了。為了避免這種尷尬的問題發生，因此建議使用 ng-href 的指令來讓 AngularJS 來幫我們處理這樣的工作。
1 | <a ng-href="img/{{ guess }}">瀏覽圖片</a> |
為什麼建議用 ng-href 呢？假設 angular.js 載入失敗時，因為我們本身就沒有設定超鏈結的 href 屬性，所以瀏覽器不讓產生鏈結的功能。所以它對使用者來說就不是一個有功用超鏈結，頂多就是...一串文字而已，至少不會讓使用者有那種怎麼會連過去是找不到網頁的疑問產生。
若能正常執行的話，就會看到 AngularJS 幫我們產生的 href 屬性囉：
至於另一個 ng-src 則是使用在具有 src 屬性的元素上。But~這邊建議使用 ng-src 的原因跟 ng-href 是不一樣的。
首先來加入一個 img 元素：
1 | <img src="img/{{ guess }}"> |
一般來說若相關程式都載入成功的話，不管怎樣切換都是能顯示的：
但若也一樣遇到 angular.js 載入失敗時，不管是直接使用 src 或是改用 ng-src 都會顯示所謂的叉燒包圖片(Chrome 及 Firefox 遇到沒有 src 屬性的圖片會不顯示)：
使用 IE10 來瀏覽時：
那各位應該就會很好奇說為什麼還要特別使用 ng-src 了吧！？
其實，元素的 src 基本上就是會跟隨著頁面文件的載入而一起被讀取，而 AngularJS 是當頁面文件內容載入後完才進行。因此若是直接使用 src 加上 Angular 表達式(Angular Expressions)的圖片路徑就會被請求載入一次了，但這是不必要且是錯誤的。
會看到正確的圖片載入是因為當 AngularJS 開始執行時就會被修正為正確路徑並載入圖片了，但若是開啟開發者工具來看時，就會發現會有一次的請求錯誤的警告訊息了。
基於這樣的機制，因此才建議使用 ng-src 來避免第一次的無謂且錯誤的請求！
最後請大家請多產生幾個超鏈結包著圖片的內容當作業來練習吧！