ng-cloak沒用?

最近用 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 的官方文件,確定沒有提醒這件事情,所以在這邊記一下…。