Зареждайте и разтоварвайте динамично външни таблици със стилове в приложението AngularJS

Имам два маршрута/изгледа в моето AngularJS приложение, които използват конфликтен CSS. Имам два отделни външни стилови листа, които искам да използвам за тези маршрути. Например foo.css за foo маршрут и bar.css за bar маршрут. Така мога да разреша конфликта.

Ще трябва обаче да заредя bar.css и да разтоваря foo.css, когато навигирам от foo до bar.

Как да направя това? Има ли библиотека/модул, който може да ми помогне да постигна този сценарий?

Разгледах ocLazyLoad, но не съм сигурен как да разтоваря заредения CSS.


javascript angularjs stylesheet dynamic-loading
person Slava Fomin II    schedule 25.11.2014    source източник

Отговори (1)


arrow_upward
3
arrow_downward

AngularJS начин

В коментар по-долу OP предложи начина, който ми се струва най-подходящ в AngularJS - използване на директивата ng-disabled. Просто трябва да направите <html> свой ng-app атрибутен елемент, така че директивата да се изпълни правилно.

<link rel="stylesheet" href="/bg/path/to/style-1.css" ng-disabled="theme.name === 'theme1'">
<link rel="stylesheet" href="/bg/path/to/style-2.css" ng-disabled="theme.name === 'theme2'">

По този начин и двата стила се зареждат незабавно (не причинява трептене при промяна по-късно). Ще бъде необходим различен подход, ако някои от стиловете не трябва да бъдат заредени първоначално.

Оригинален отговор

Вижте този въпрос. След това просто намерете подходящите <link> тагове и ги активирайте/деактивирайте по желание. Не мисля, че това има нещо общо с AngularJS.

person hon2a    schedule 25.11.2014
comment
Благодаря ви за отговора! Мога обаче да добавя директива ngDisabled или ngIf към <link> елементи, както предложихте, но по този начин няма да мога да забавя изобразяването на изглед и документът вероятно ще изглежда нестилизиран за известно време. Просто не искам да FOUC нещата. - person Slava Fomin II; 25.11.2014
comment
Ако задействате деактивирането с помощта на една и съща променлива в същия обхват, и двата <link>s ще бъдат актуализирани по време на същия $digest (и двата файла ще бъдат заредени при зареждане на страницата). Така че не бих се тревожил за трептене, единственият възможен проблем е, че и двата ви листа със стилове ще бъдат приложени, докато първият $digest не го подреди. - person hon2a; 25.11.2014
comment
Е, не искам да се зареждат оптимистично. Не всеки потребител на приложението някога ще използва втория маршрут. - person Slava Fomin II; 25.11.2014
comment
В такъв случай вече има въпрос за SO, занимаващ се с проблема. - person hon2a; 25.11.2014
comment
Да, благодаря ) Видях този въпрос, но е по-общ от моя. Вероятно търся съществуващо решение, което може да го накара да работи. - person Slava Fomin II; 25.11.2014