使用范围内的变量全局更新 CSS 样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15573413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:09:04  来源:igfitidea点击:

Updating a CSS style globally with variable in scope

cssangularjsangularjs-scope

提问by Sam

I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.

我目前正在构建一个可以选择更改主题的应用程序。在这种情况下,主题只是更改应用程序中几个关键元素的颜色。

So currently, on all elements that require the theme color, I have given them the css class has-main-color.

所以目前,在所有需要主题颜色的元素上,我都给了他们 css class has-main-color

In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.

在控制器中,我从 Web 服务中获取所需的颜色并将其设置为$scope.mainColor = color;.

All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-colorclass.

所有这些都很好,但我遇到的问题是我找不到将这种颜色应用于has-main-color类的合适方法。

Currently, I'm trying the following:

目前,我正在尝试以下操作:

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

As you could probably guess, this doesn't work so well.

正如您可能猜到的那样,这并不奏效。

So what would be the best approach to solve this problem using AngularJS?

那么使用 AngularJS 解决这个问题的最佳方法是什么?

采纳答案by Ryan O'Neill

Look at the documentation page for ngStyle. It has almost exactly what you want.

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

回答by deanmcpherson

If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.

如果有人想使用您的原始方法,我今天遇到了同样的问题,并为样式组合了一个(微小的!)指令,该指令允许内联样式表中的角度表达式。

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

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

Allows for

允许

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

With bg color attached to the appropriate scope.

将 bg 颜色附加到适当的范围。

回答by Arun P Johny

I don't think you can use a classto do this, however try this

我不认为你可以使用 aclass来做到这一点,但是试试这个

<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

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

演示:小提琴

Another easy fix

另一个简单的修复

<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

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

演示:小提琴