iT邦幫忙

DAY 19
0

入門AngularJS筆記與前端領域的學習筆記分享系列 第 19

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak

ng-cloak是什麼?

和ng-bind很類似,同樣可以解決angularjs沒有載入完成或發生失敗的狀況。

但ng-cloak指令需要另外增加css,用來解決跨瀏覽器顯示的問題。

改寫昨天介紹ng-bind的Demo:

改寫官方Demo,使用ng-bind與ng-cloak顯示,模擬angular載入失敗的狀況:

http://jsbin.com/aQOBun/3/edit
從Demo可以發現,結果和ng-bind相同。

ng-cloak和ng-bind一樣,同樣可以使用在任何標籤上,
也可以用在body中, 但是比較建議運用在小部分的頁面裡,運用多個ng-cloak,讓瀏覽器逐步地render。

ng-cloak怎麼用?

<span ng-cloak class="ng-cloak">{{ name }}</span>
  1. 在html中直接在標籤內加入ng-cloak指令,並加上ng-cloak的css樣式。

    [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
    }

  2. 使用ng-cloak指令,為針對跨瀏覽器都能夠正常顯示,我們必須加入上方css,
    並記得加上!important修飾子,強制所有瀏覽器都能夠執行display: none

ng-bind與ng-cloak用法的比較

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

ng-bind的用法是在標籤內使用ng-bind去指定model名稱。

<span ng-cloak>{{ name }}</span>

ng-bind的用法也是在標籤內加入ng-cloak指令,但在標籤之間使用{{ model名稱 }}去綁定資料。

官方範例:

http://jsfiddle.net/api/post/library/pure/

官方文件:

http://docs.angularjs.org/api/ng.directive:ngCloak

未加css所遇到的問題:

http://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink

運用ng-show與ng-cloak所遇到的問題:

http://minipai.tumblr.com/post/62704605931/ng-cloak#note-container

關於 AngularJS 表達式與 ngBind 指令 (directive) 的使用技巧-Will保哥的教學分享

http://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips.aspx

---------------入門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


上一篇
Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
下一篇
Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

1 則留言

0
jiro9611
iT邦新手 5 級 ‧ 2014-08-15 14:13:03

iamya提到:
檢視原始檔複製到剪貼簿列印關於
<span ng-cloak>{{ name }}</span>

ng-bind的用法也是在標籤內加入ng-cloak指令,但在標籤之間使用{{ model名稱 }}去綁定資料。

大大,你這句話似乎有矛盾喔! 解釋文的第一個ng-bind應該是ng-cloak吧!?

我要留言

立即登入留言