Aktualizowanie stylu CSS na całym świecie za pomocą zmiennej w zakresie

Question

Aktualnie tworzę aplikację z opcją zmiany motywu. Motyw w tym przypadku polega po prostu na zmianie koloru kilku kluczowych elementów w aplikacji.

Obecnie, we wszystkich elementach wymagających koloru motywu, podałem im klasę css has-main-color.

W kontrolerze dostaję żądany kolor z usługi internetowej i ustawię go w zakresie jako $scope.mainColor = color;.

Wszystko to działa dobrze, ale problemem jest to, że nie mogę znaleźć odpowiedniej metody zastosowania tego koloru do klasy has-main-color.

Obecnie usiłuję następujące:

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

Jak można się domyślić, to nie działa tak dobrze.

Jakie byłoby najlepsze podejście do rozwiązania tego problemu za pomocą AngularJS?

Answer 1

Spójrz na stronie dokumentacji dla ngStyle. Ma prawie dokładnie to, co chcesz.

<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> 

Answer 2

Nie sądzę, można użyć class to zrobić, jednak spróbować tego

<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); 
      }); 
     } 
    } 
}); 

Demo: Fiddle

Innym łatwo naprawić

<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; 
    } 
}) 

Demo: Fiddle

Answer 3

Jeśli ktoś chciałby używać oryginalnego podejścia, natknąłem się na ten sam problem dzisiaj i rzucił razem (małe!) Dyrektywa o stylu, który pozwala na kanciastych wyrażeń wewnątrz arkuszy stylów inline.

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

Umożliwia

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

z bg koloru dołączony do właściwego zakresu.