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

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

不過就像建議使用 ng-src 及 ng-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 的方式來取代原本使用 {{ 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 未載入完成或是失敗時，看到的會是：

而 angular.js 載入後且順利綁定時呢：

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

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