為了避免 AngularJS 的模板符號跟其它後端程式的符號衝突,所以我們在 AngularJS 入門教學 - 自訂表達式(模板)符號中學到怎樣來自訂模板符號。
不過就像建議使用 ng-src 及 ng-href 的理由一樣,若當 angular.js 未載入完成前,我們可能會先看到像是 {{ expression }} 的內容,雖然可能會立即的被替換成真實的內容,但一開始看到總是覺得怪又醜。
像是:
檢視原始碼 HTML
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 }} 的方式:
檢視原始碼 HTML
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 的方式來當練習吧!