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

前端之家收集整理的这篇文章主要介绍了使用范围变量全局更新CSS样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在构建一个可以更改主题的应用程序.在这种情况下,主题只是改变应用程序中几个关键元素的颜色.

所以目前,在所有需要主题颜色的元素上,我已经给它们了css类has-main-color.

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

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

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

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

你可能猜到,这不行.

那么使用AngularJS来解决这个问题的最好办法是什么?

解决方法

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

猜你在找的CSS相关文章