Загрузка CSS с угловыми стилями

0

Моя страница загружает и применяет CSS, определенный в одной из его ссылок css. У меня также есть угловой контроллер, который вызывает некоторые сервисы для захвата некоторых данных. Эти данные также будут применять стили CSS (через угловые) в зависимости от типа возвращаемых данных.

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

Загрузка страницы применяет CSS... ждет возвращения данных из служебного вызова, а затем применяет еще несколько стилей.

Есть ли способ подождать, пока данные вернутся до того, как будут применены какие-либо стили на странице, будь то из ссылки css html или угловой директивы, чтобы избежать этой проблемы с задержкой/загрузкой?

Теги:

2 ответа

2
Лучший ответ

Вы можете предварительно загрузить данные до разрешения углового маршрута.

Пример:

$routeProvider
                .when('/bar/foo/',
                {
                    templateUrl: '',
                    controller: Ctrl,
                    resolve: {
                        data: ['service', function (service) {
                              return service.function();
                          }
                        ],
                    }
                })

Внесите 'data' в зависимость от вашего контроллера. В этом случае данные доступны до отображения страницы.

Поделиться
  • 0
    Мне нравится этот подход, спасибо. Тем не менее, я сталкиваюсь с проблемой. Когда я использую свойство resol в моем routeProvider, кажется, что он не поддерживает req.headers и если я вызываю этот маршрут непосредственно из контроллера. Например, у меня есть маршрут Factory $ resource, который я вызываю в контроллере для возврата некоторых данных, сначала проверяя заголовок токена (используя req.header). Это прекрасно работает. Но когда я выбираю тот же маршрут $ resource из свойства resol, он превращается в маршрут $ resource, но, похоже, не имеет того же требования. информация и происходит сбой на этапе проверки токена. мысли?
  • 0
    Я думаю, что вы путаете две разные вещи: 1. Заголовки запроса приходят на картинку при использовании службы $ http для выполнения вызовов API. $ http используется в вашей функции 'service', которая не имеет ничего общего с разрешением маршрута. 2. routeProvder помогает настроить маршруты в приложении. Чтобы нажать на все запросы, исходящие от $ httpProvider, вы можете использовать перехватчики. пример: $ httpProvider.defaults.headers.common ['X-Requested-With'] = 'XMLHttpRequest'; $ httpProvider.defaults.headers.common ['X-XSRF-Token'] = angular.element ('[name = "__ RequestVerificationToken"]'). val ();
Показать ещё 1 комментарий
0

Как ваш сервис "применяет еще несколько стилей"? Это добавление тега ссылки в DOM?

Вы можете вручную сохранить разные стили, которые вы получаете во временной переменной, и применять их все сразу, когда вы знаете, что у вас есть все они.

Еще одна приятная альтернатива - скрыть всю страницу, например, с помощью логотипа или индикатора выполнения или просто белую страницу, пока не будут применены все ваши стили. В своем верхнем контроллере поставьте некоторый $scope.pageReady что вы установите значение true только ваши службы вернут весь CSS. В то же время скройте содержимое:

<div ng-show = "pageReady"> ... </div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню