ng-cloak沒用？

September 30, 2013

最近用 AngularJS 的 ng-show 做了很大的分類選單，但是遇到一個困擾是這個大選單會「機率性」的閃一下然後消失。

原本我是用 ng-cloak ，讓想隱藏的選單 DOM 從網頁一開始 render 時就隱藏（display:none）。

<div class="categories-full ng-cloak" ng-show="showCat">

但是用 ng-cloak 的話，作動的順序會變成

  1. HTML render，ng-cloak 存在：div.categories-full 隱藏
  2. JS讀取，AngularJS 執行，ng-cloak被移除：div.categories-full 顯示
  3. ng-show發揮作用：div.categories-full 隱藏

這三步 2. 和 3. 之間有時幾乎沒有，這時 div.categories-full 就不會閃，從頭到尾都不會出現，但是有時就會。

這問題困擾了一陣子，今天才又仔細看ng-show的原理，是藉由加入/移除 .ng-hide來達成的。所以對於 ng-show 所在的DOM，應該是要用 .ng-hide 取代 ng-cloak 才對。這樣就不會閃了。

<div class="categories-full ng-hide" ng-show="showCat">

我又去翻了 ng-show 的官方文件，確定沒有提醒這件事情，所以在這邊記一下…。