ng-bind是什麼？

通常我們會將綁定model名稱放在{{ }}裡面來顯示model的值。

正式開發專案時，有可能會載入很多library，

如果我們載入太多library，HTML 已經載入完畢，而angularjs沒有載入完成或發生失敗的狀況，

瀏覽器不認識{{ }}這個元素，所以就會直接將{{ }}的內容，當作字串完整的顯示出來。

或是網頁一開始HTML 已經載入完畢，後來angularjs才載入完成，

即使在執行上沒有問題，但{{ }}的內容就會在網頁上面閃一下，畫面感覺好像有bug 似的。

此時，我們可以使用ng-bind這個angular指令解決這個問題。

改寫官方Demo，使用原本寫法顯示，模擬angular載入失敗的狀況：

http://jsbin.com/OXUkOyo/1

改寫官方Demo，使用ng-bind顯示，模擬angular載入失敗的狀況：

http://jsbin.com/aQOBun/1
先來看angularjs沒有載入的狀況。

此範例刻意將angular的library拿掉，此時載入失敗。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 

使用原本{{}}寫法

<span>{{name}}</span>

載入失敗，直接顯示Hello {{name}}!

改寫官方Demo，使用原本寫法顯示，模擬angular載入失敗的狀況：

http://jsbin.com/OXUkOyo/1/edit

從Demo結果顯示Hello {{name}}!的完整字串，看起來很明顯是個bug，

為了避免這個狀況，我們可以使用ng-bind來預防錯誤發生。

ng-bind怎麼用？

使用的方法很簡單，直接在欲顯示的標籤內加入ng-bind="model名稱"

<span ng-bind="name"></span>

即使載入失敗，也不會出現{{}}

改寫官方Demo，使用ng-bind顯示angular載入失敗的狀況：

http://jsbin.com/aQOBun/1/edit/

改寫官方Demo，使用ng-bind顯示angular載入正常的狀況：
http://jsbin.com/aMomUWU/1/edit

官方文件：
http://docs.angularjs.org/api/ng.directive:ngBind

官方範例：
http://jsfiddle.net/api/post/library/pure/

其他文章：
[AngularJS]AngularJS 入門教學 - ng-bind
http://abgne.tw/angularjs/angularjs-getting-stared/ng-bind.html

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196