Глобальное обновление стиля CSS с переменной в области видимости

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

Итак, в настоящее время для всех элементов, которым требуется цвет темы, я присвоил им класс css has-main-color.

В контроллере я получаю желаемый цвет от веб-службы и устанавливаю его в области видимости как $scope.mainColor = color;.

Все это прекрасно работает, но проблема заключается в том, что я не могу найти подходящий метод применения этого цвета к классу has-main-color.

В настоящее время я пытаюсь сделать следующее:

<style>
    .has-main-color {
        color: {{mainColor}}
    }
</style>

Как вы, наверное, догадались, это работает не так хорошо.

Итак, как лучше всего решить эту проблему с помощью AngularJS?


css angularjs angularjs-scope
person Sam    schedule 22.03.2013    source источник
comment
стили внутри ‹style›‹/style› применяются только один раз. Поэтому динамическое изменение содержимого внутри него не помогает.   -  person ganaraj    schedule 22.03.2013

Ответы (3)


arrow_upward
10
arrow_downward

Посмотрите страницу документации для ngStyle. В нем есть почти то, что вы хотите.

<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
person Ryan O'Neill    schedule 22.03.2013
comment
Я провел небольшое исследование в стиле ng, и оказалось, что это именно то, что мне нужно. Спасибо вам за вашу помощь - person Sam; 28.03.2013
comment
@Ryan, будет ли это работать, если я получу стили css из своих API-интерфейсов Drupal? Предположим, у меня есть приложение для разных групп людей, основанное на брендинге этого пользователя, мне нужно изменить цвет css, шрифт и т. д. - person Smitha; 04.05.2016

arrow_upward
7
arrow_downward

Я не думаю, что вы можете использовать class для этого, однако попробуйте это

<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
    <div class="has-main-color">Top1</div>
    <div>Child 1</div>
    <div class="has-main-color">Top1</div>
    <div>Child 1</div>
    <div class="has-main-color">Top1</div>
    <div>Child 1</div>
    <br />
    <input type="button" value="Red" ng-click="color('red')" />
    <input type="button" value="Green" ng-click="color('green')" />
    <input type="button" value="Blue" ng-click="color('blue')" />
</div>

JS

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){
    $scope.mainColor = 'grey';
    $scope.color = function(color) {
        $scope.mainColor = color;
    }
});

app.directive('themeWrapper', function(){
    var counter = 0, regex = /^theme-wrapper-\d+$/;
    return {
        restrict: 'A',
        link: function(scope, elm, attrs){
            attrs.$observe('themeWrapper', function(value){
                var className = 'theme-wrapper-' + (counter++);
                $('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');

                var classes = elm.attr('class').split(' ');
                angular.forEach(classes, function(v, i){
                    if(regex.test(v)) {
                        elm.removeClass(v);
                    }
                });

                elm.addClass(className);
            });
        }
    }
});

Демонстрация: Fiddle

Еще одно легкое исправление

<div ng-app="test-app" ng-controller="MyController">
    <div style="color: {{mainColor}}">Top1</div>
    <div>Child 1</div>
    <div style="color: {{mainColor}}">Top1</div>
    <div>Child 1</div>
    <div style="color: {{mainColor}}">Top1</div>
    <div>Child 1</div>
    <br />
    <input type="button" value="Red" ng-click="color('red')" />
    <input type="button" value="Green" ng-click="color('green')" />
    <input type="button" value="Blue" ng-click="color('blue')" />
</div>

JS

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){
    $scope.mainColor = 'grey';
    $scope.color = function(color) {
        $scope.mainColor = color;
    }
})

Демонстрация: Fiddle

person Arun P Johny    schedule 22.03.2013

arrow_upward
7
arrow_downward

Если кто-то захочет использовать ваш оригинальный подход, сегодня я столкнулся с той же проблемой и собрал (крошечную!) директиву для стиля, которая позволяет использовать угловые выражения внутри встроенных таблиц стилей.

https://github.com/deanmcpherson/angular-inline-style

Позволяет

body { background-color: {{bgColor}}; }

С цветом bg, прикрепленным к соответствующему объему.

person deanmcpherson    schedule 22.02.2014
comment
Хех, хорошая работа! Последние 3 с лишним месяца я занимаюсь одним и тем же, так что, возможно, стоит посмотреть: ngCss / на GitHub. Проблема, которую я вижу с вашей, должна быть в пределах области действия, чтобы она работала (поэтому либо наличие ng-controller в теге HTML, либо встроенный STYLE). Но опять же, у вас 13 строк кода, а у меня недавно перевалило за 650 строк ;) - person Campbeln; 21.01.2015
comment
@deanmcpherson, просто и понятно! Спасибо, что поделились! - person Jim Harkins; 02.10.2015
comment
Нашел это, которое не требует пользовательской директивы. stackoverflow.com/a/29309120/3291253 - person Jim Harkins; 02.10.2015