Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngHref 與 ngSrc

範例 1

超鏈結及圖片幾乎是每個網頁中都會有的,在開始應用系統時,也許會遇到鏈結的位置或是圖片依某些值的不同而改變。在用 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)來這麼寫:

檢視原始碼 JavaScript
1
<a href="img/{{ guess }}">瀏覽圖片</a>

預覽時可以透過開發者工具來看到鏈結的真實位置:
nghref-ngsrc-0

然後按下第一個按鈕後的鏈結位置也跟著改變:
nghref-ngsrc-1

當一切都是很順利時,看起來都很美好。不過若是 angular.js 沒有載入成功或是還沒載入完的話,那麼看到的鏈結就會是...
nghref-ngsrc-2

因為它有 href 屬性,所以對於瀏覽器來說就是一個正常的超鏈結,因此就會有鏈結功能,然後使用者點擊後就出現 404 找不到網頁了。為了避免這種尷尬的問題發生,因此建議使用 ng-href 的指令來讓 AngularJS 來幫我們處理這樣的工作。

1
<a ng-href="img/{{ guess }}">瀏覽圖片</a>

為什麼建議用 ng-href 呢?假設 angular.js 載入失敗時,因為我們本身就沒有設定超鏈結的 href 屬性,所以瀏覽器不讓產生鏈結的功能。所以它對使用者來說就不是一個有功用超鏈結,頂多就是...一串文字而已,至少不會讓使用者有那種怎麼會連過去是找不到網頁的疑問產生。

nghref-ngsrc-3

若能正常執行的話,就會看到 AngularJS 幫我們產生的 href 屬性囉:
nghref-ngsrc-4

至於另一個 ng-src 則是使用在具有 src 屬性的元素上。But~這邊建議使用 ng-src 的原因跟 ng-href 是不一樣的。

首先來加入一個 img 元素:

1
<img src="img/{{ guess }}">

一般來說若相關程式都載入成功的話,不管怎樣切換都是能顯示的:
nghref-ngsrc-5

但若也一樣遇到 angular.js 載入失敗時,不管是直接使用 src 或是改用 ng-src 都會顯示所謂的叉燒包圖片(Chrome 及 Firefox 遇到沒有 src 屬性的圖片會不顯示):
nghref-ngsrc-6

使用 IE10 來瀏覽時:
nghref-ngsrc-7

那各位應該就會很好奇說為什麼還要特別使用 ng-src 了吧!?

其實,元素的 src 基本上就是會跟隨著頁面文件的載入而一起被讀取,而 AngularJS 是當頁面文件內容載入後完才進行。因此若是直接使用 src 加上 Angular 表達式(Angular Expressions)的圖片路徑就會被請求載入一次了,但這是不必要且是錯誤的。

nghref-ngsrc-8
會看到正確的圖片載入是因為當 AngularJS 開始執行時就會被修正為正確路徑並載入圖片了,但若是開啟開發者工具來看時,就會發現會有一次的請求錯誤的警告訊息了。

基於這樣的機制,因此才建議使用 ng-src避免第一次的無謂且錯誤的請求

最後請大家請多產生幾個超鏈結包著圖片的內容當作業來練習吧!

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響