ngShow задержка нагрузки проблема

Question

У меня есть меню, которое скользит, когда некоторые кнопки cliked, но в начале этого меню скрыто, что-то вроде этого:

<div ng-show="menuShow"> 
    my menu here... 
</div> 

Выпуска при загрузке страницы меню не (возможно, потому, что директива ngShow не была загружена), а затем они исчезают (возможно, потому, что была загружена директива ngShow) и создают странный «эффект мигания» в меню.

Каков наилучший способ справиться с этой проблемой?

Answer 1

Быстрее и проще всего было бы добавить директиву ngCloak к элементу.

<div ng-show="menuShow" ng-cloak> 
    my menu here... 
</div> 

Если Angular загружен синхронно в головной части документа, это должно предотвратить мерцание.

Если вы не загружая Угловая синхронно, то according to the docs, вы можете вручную добавить CSS на странице:

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

И если это не возможно, по какой-то причине, вы можете просто все Угловое содержимое не находится на странице при начальной загрузке, но включено в директиву ng-include, ng-view или ui-view или пользовательскую директиву, которая включает в себя собственный шаблон. (Это то, как я это делаю, но больше по структурным причинам)

Answer 2

Я не мог получить ng-cloak, даже если вы применяете правила CSS, поэтому я закончил использовать ng-if. https://docs.angularjs.org/api/ng/directive/ngIf

Это приводит к немного больше накладным расходам, поскольку Угловой будет фактически удалить объект из DOM и загрузить его каждый раз, когда значение ng-if изменений, но в моем случае это было не очень часто и накладные расходы не было заметно.