Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Проблемы с отображением Task Manager-а (https://javascript.ru/forum/angular/56762-problemy-s-otobrazheniem-task-manager.html)

Sergei-b84 03.07.2015 12:40

Проблемы с отображением Task Manager-а
 
Вложений: 1
Привет, всем!
Помогите решить проблему.
Делаю Task Manager на Angular JS. Все хорошо работает, но вот при обновлении страницы на локальном сервере Денвер или на хостинге в браузерах Опера и Хром буквально несколько миллисекунд видны скрытые элементы (иконка, чекбокс и др.). Как сделать так, чтобы этого не происходило? Визуально - это очень некрасиво и неприятно. Прилагаю исходники.

Вот визуальный пример работы, правда не мой скрипт, но понять суть проблемы поможет. В опере и Хроме при нажатии F5 видно хорошо. http://codingmiles.com/demo/todo-list/index.html

nerv_ 03.07.2015 13:47

Цитата:

Сообщение от Sergei-b84
при обновлении страницы на локальном сервере Денвер или на хостинге в браузерах Опера и Хром буквально несколько миллисекунд видны скрытые элементы (иконка, чекбокс и др.). Как сделать так, чтобы этого не происходило? Визуально - это очень некрасиво и неприятно

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

Sergei-b84 03.07.2015 14:29

Цитата:

Сообщение от nerv_ (Сообщение 377480)

Спасибо.

Cделал так
<style>[ng-cloak] { display: none; }</style>

и
<ul  class="taskList" ng-cloak>
                <li class="taskItem taskItem-{{taskItem.display}}" ng-repeat="taskItem in taskItem track by $index" ng-model="taskItem">
					<input  type="checkbox" class="taskCheckbox taskCheckbox-{{taskItem.display}}" ng-model="taskItem.complete" ng-change="save()">
                    <span class="complete-{{taskItem.complete}}">{{taskItem.description}}</span>
                    <span class="category-{{taskItem.category}} category-{{taskItem.display}}">{{taskItem.category}}</span>
                    <strong class="taskDate complete-{{taskItem.complete}}">
					<i class="fa fa-calendar fa-calendar-{{taskItem.display}}"></i>{{taskItem.date | date : 'mediumDate'}}</strong>
                </li>
            </ul><!-- taskList -->

nerv_ 03.07.2015 17:25

Цитата:

ngCloak works in cooperation with the following css rule embedded within angular.js and angular.min.js
__


Часовой пояс GMT +3, время: 09:40.