2014-10-25 3 views
2

Я создал прелоадер, который прекрасно работает при загрузке страницы в первый раз: http://vivule.ee/1AngularJS - показать прелоадер вместо нг-плащ

Однако при навигации внутри страницы, загрузчик не работает должным образом. Вы очень хорошо это видите при использовании FF. Вместо загрузчика он просто отображает пустой фон. Я использую ng-cloak, без него, вместо пустого фона он будет показывать теги загрузки контента {{}}.

Мой загрузчик работает следующим образом: загрузчик изображения до загрузки содержимого, а затем скрывает загрузчик с помощью ng-hide. Могу ли я вместо использования ng-hide каким-то образом прослушивать ng-плащ, например, когда активируется ng-cloak, он показывает загрузчика, и когда содержимое загружается, оно скрывает его, потому что сейчас ng-clock, похоже, загружается до ng-hide.

Извините, если слишком запутанным вопрос:/

PS! Чтобы перемещаться по странице, прокрутите вниз до похожих игр и нажмите на один.

+1

Ваш код должен отображаться под вопросом, а не внешние ссылки. Внешние ссылки изменят вопрос о бесполезности в будущем – charlietfl

ответ

0

Я не смог решить проблему, используя ng-cloak, вместо этого я сделал это - загрузчик отображается по умолчанию на странице. Когда угловые нагрузки передают данные, я посылаю команду jquery, чтобы скрыть загрузчик (это делается в myapp.controller). Когда я перемещаюсь внутри страницы, я показываю загрузчик с помощью jquery (код снова находится в myapp.controller) - ПРИМЕЧАНИЕ! Я покажу его до того, как загрузится новая страница.

Скрыть и показать сплошное отображение: нет и отображение: блок (отображение показано нажатием jquery).

$(".single_similar_game_container").click(function(e) { 
     if (e.button == 0) { 
      $("#spinner_bg").css("display", "block"); 
     } 
    }); 
0

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

body div.wrap.ng-cloak div.preloader { display: block !important; } 
body div.wrap.ng-cloak div:not(.preloader) { display: none!important; }