11

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

所以目前，在所有需要主题颜色的元素上，我都给了它们 css 类has-main-color。

在控制器中，我从 Web 服务中获取他们想要的颜色，并将其设置为$scope.mainColor = color;.

所有这些都可以正常工作，但我遇到的问题是我找不到将这种颜色应用于has-main-color类的合适方法。

目前，我正在尝试以下操作：

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

正如您可能猜到的那样，这不太好用。

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

4

3 回答 3

10

查看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>
于 2013-03-22T15:40:35.747 回答
7

我不认为你可以使用 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

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

演示：小提琴

另一个简单的修复

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

演示：小提琴

于 2013-03-22T15:23:00.187 回答
7

如果有人想使用你原来的方法，我今天遇到了同样的问题，并把一个（很小的！）样式指令放在一起，它允许内联样式表中的角度表达式。

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

允许

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

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

于 2014-02-22T07:20:52.477 回答