2015-05-29 1 views
0

Я столкнулся с точной same problem found in this question. Однако оба ответа не помогли мне.Как удалить задержку с инициализации ngShow? Когда ng-cloak терпит неудачу?

Видео моей проблемы: https://www.youtube.com/watch?v=ByjmwmamemM

enter image description here

Когда мое приложение загружает, есть несколько Popovers с нг-шоу проверки на всех из них. Они все начинают false, однако на 3-4 секунды (долгое время) появляются всплывающие окна, затем исчезают.

В соответствии с ответом в вопросе, который я связал с выше, я должен попытаться загрузить Angular в верхней части главы, а если это не сработает, добавьте .ng-cloak в мой CSS и в divs.

Оба не работают :(

кто-нибудь еще запустить в эту проблему, прежде чем

Index.html:

enter image description here

<body ng-app="tickertags"> 

    <div ui-view></div> 

dashboard.html < - первый шаблон, загруженный в ui-view

<div ng-controller="DashCtrl"> 
    <top-notification></top-notification> 
    <alerts-panel></alerts-panel> 
    <search-popover></search-popover> 
    <tags-search></tags-search> 
    <tags-filter></tags-filter> 

    <div class="dash-body" ng-click="bodyClick()"> 
     <header> 
      <platform-header></platform-header> 
      <control-header></control-header> 
      <view-header></view-header> 
     </header> 

     <tickers-panel></tickers-panel> 
     <tags-panel></tags-panel> 

     <section id="panel-activity" class="activity-panel"> 
      <chart-header></chart-header> 
      <chart-iq></chart-iq> 
      <social-media-panel></social-media-panel> 
     </section> 
    </div> 

    <overlay></overlay> 
</div> 

В Popovers:

enter image description here

searchPopover: (3-4 сек до сокрытия)

<div ng-show="searchPopoverDisplay" class="search-popover" ng-cloak> 

tagSearchPopover: (3-4 секунды до сокрытия)

<div ng-show="tagsSearch.tagsFuzzyResults" class="tag-search-popover" ng-cloak> 

tagFilterPopover: (< - это поповер исчезает быстрее, 0,5 сек)

<div ng-show="tagsFilterOn" class="tags-filter-popover" ng-click="captureClick()" ng-cloak> 

нг-накидка

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

Скрыть их по умолчанию в css, а затем переопределить при угловых нагрузках. Задержка в 3-4 секунды может быть временем, которое требуется для извлечения и загрузки углов во всех других запросах, которые вы делаете (вы должны проверить свою сетевую панель). –

+0

Спасибо, да, я думал, что это может быть путь ... вместо этого переключится на 'ng-class'. –

+0

Вы хотите опубликовать ответ? Это сработало :) использовал 'ng-class':' .display-on { display: block! Important; непрозрачность: 1! Important; } ' –

ответ

1

Скрыть их по умолчанию в css, th en переопределяют при угловых нагрузках. Задержка в 3-4 секунды может быть временем, которое требуется для извлечения и загрузки углов во всех других запросах, которые вы делаете (вы должны проверить свою сетевую панель).

.display-on { 
    display: block !important; 
    opacity: 1 !important; 
} 

ng-class="{'display-on': searchPopoverDisplay}" 
1

Я знаю, что это был дан ответ, но у меня есть другое решение.

Использование bootstrap.css:

<div class="collapse" ng-class="{'collapse': [falsy after ng evaluates] }" 

Это удалит класс коллапс, если это необходимо, но оно будет начинаться как скрытые до Угловая можно оценить.

В противном случае используйте любой класс, который устанавливает отображение: none, и удаляет его с помощью ng-класса.

1

Чтобы сделать скрытый по умолчанию div и предотвратить его показ до того, как страница будет полностью загружена, вы можете добавить ng-hide в атрибут class. Например:

<div ng-show="searchPopoverDisplay ng-hide" class="search-popover" ng-cloak> 
+0

Это самое простое и эффективное решение, оно заставляет ng-hide, пока ng-show (в конечном итоге) не вернется к истинному – 96khz

Смежные вопросы