Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ng-bind

範例 1

為了避免 AngularJS 的模板符號跟其它後端程式的符號衝突,所以我們在 AngularJS 入門教學 - 自訂表達式(模板)符號中學到怎樣來自訂模板符號。

不過就像建議使用 ng-srcng-href 的理由一樣,若當 angular.js 未載入完成前,我們可能會先看到像是 {{ expression }} 的內容,雖然可能會立即的被替換成真實的內容,但一開始看到總是覺得怪又醜。

像是:

1
2
3
4
5
6
<div class="well span6" style="margin-top:20px;">
	<label>Name:</label>
	<input type="text" ng-model="name" placeholder="Enter a name here">
	<hr>
	<h1>Hello {{ name || "AngularJS" }}!!</h1>
</div>

angular.js 未載入完成或是失敗時,就是會先看到:
ng-bind-0

同時查看原始碼的話,也一樣是看到:
ng-bind-1

只有當載入完成時才會顯示所綁定的內容:
ng-bind-2

假設你是一個完美主義者,不希望讓瀏覽者有機會看到這樣的內容的話,那麼可以改用 ng-bind 的方式來取代原本使用 {{ expression }} 的方式:

1
2
3
4
5
6
<div class="well span6" style="margin-top:20px;">
	<label>Name:</label>
	<input type="text" ng-model="name" placeholder="Enter a name here">
	<hr>
	<h1>Hello <span ng-bind="name || 'AngularJS'">AngularJS</span>!!</h1>
</div>

在使用 ng-bind 時,因為它本身就是接受 Angular 表達式(Angular Expressions),所以這邊就能填入語法內容。

如此一來,就算 angular.js 未載入完成或是失敗時,看到的會是:
ng-bind-3

angular.js 載入後且順利綁定時呢:
ng-bind-4

看不出有沒有綁定嗎?請仔細看筆者特別用紅色矩形圈起來的地方,這就是有沒有綁定的關鍵囉。

一樣也請各位將 AngularJS 入門教學 - ngRepeat (一) 的作業拿出來改成使用 ng-bind 的方式來當練習吧!

範例 1

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

發表迴響