Aggiornamento di uno stile CSS a livello globale con variabile nell'ambito

Question

Attualmente sto creando un'app con la possibilità di modificare il tema. Un tema in questo caso consiste semplicemente nel cambiare il colore di alcuni elementi chiave nell'app.

Così attualmente, su tutti gli elementi che richiedono il colore del tema, ho dato loro la classe css has-main-color.

Nel controller, ottengo il loro colore desiderato dal servizio Web e lo impostano nell'ambito come $scope.mainColor = color;.

Tutto questo funziona correttamente, ma il problema che sto ottenendo è che non riesco a trovare un metodo adatto per applicare questo colore alla classe has-main-color.

Attualmente, sto cercando il seguente:

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

Come si può intuire, questo non funziona così bene.

Quindi quale sarebbe l'approccio migliore per risolvere questo problema utilizzando AngularJS?

Answer 1

Guardate la pagina di documentazione per ngStyle. Ha quasi esattamente quello che vuoi.

<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

Non credo che è possibile utilizzare un class per fare questo, però provate questo

<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

Un'altra soluzione semplice

<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

Se qualcuno volesse usare il vostro approccio originale, mi sono imbattuto lo stesso problema di oggi e ha gettato insieme un (piccolo!) Direttiva per lo stile che permette di espressioni angolari all'interno di fogli di stile in linea.

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

Consente di

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

con il colore attaccato alla portata appropriata.