Cập nhật kiểu CSS toàn cục với biến số trong phạm vi

Question

Tôi hiện đang xây dựng một ứng dụng có tùy chọn để thay đổi chủ đề. Một chủ đề trong trường hợp này, chỉ đơn giản là bao gồm thay đổi màu sắc của một vài yếu tố chính trong ứng dụng.

Vì vậy, hiện tại, trên tất cả các yếu tố yêu cầu màu chủ đề, tôi đã cung cấp cho họ lớp css has-main-color.

Trong bộ điều khiển, tôi nhận được màu mong muốn của họ từ dịch vụ web và đặt nó thành phạm vi là $scope.mainColor = color;.

Tất cả điều này hoạt động tốt, nhưng vấn đề tôi nhận được là tôi không thể tìm thấy phương pháp phù hợp để áp dụng màu này cho lớp has-main-color.

Hiện nay, tôi đang cố gắng như sau:

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

Như bạn có thể có thể đoán, điều này không làm việc rất tốt.

Vì vậy, cách tiếp cận tốt nhất để giải quyết vấn đề này bằng AngularJS là gì?

Answer 1

Nhìn vào trang tài liệu cho ngStyle. Nó có gần như chính xác những gì bạn muốn.

<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

Tôi không nghĩ rằng bạn có thể sử dụng một class để làm điều này, tuy nhiên cố gắng này

<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

Một sửa chữa dễ dàng

<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

Nếu bất kỳ ai muốn sử dụng phương pháp tiếp cận ban đầu của bạn, tôi đã gặp cùng một vấn đề hôm nay và đưa ra một chỉ dẫn (nhỏ!) Cho biểu thức góc bên trong bảng kiểu nội tuyến.

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

Cho phép

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

Với màu bg thuộc phạm vi thích hợp.