我可以在内部 CSS 中使用 Angular js 变量吗？答案

【问题标题】：Can I use angular js variable in internal CSS?我可以在内部 CSS 中使用 Angular js 变量吗？
【发布时间】：2018-07-08 00:38:27
【问题描述】：

我正在做一个 angularjs 项目，我需要在 CSS 中使用用户定义（动态）颜色，有没有办法使用 Angularjs、核心 JS 或 SASS 在我的 CSS 中使用这种动态颜色？

类似...

HTML 页面中的内部 CSS：

<style>
 .button, .link {
    background:{{ ColorTheme }};
  }
</style>

AngularJS 控制器：

app.controller('myController', function($scope) {
    $scope.ColorTheme = '#f00'};
});

【问题讨论】：

一种方法是使用 Sass 创建多个 css 主题文件，并根据用户需要更改引用。
是的，您可以，您应该将样式标签保留在同一控制器标记边界内。或者你也可以通过 ng-class 来实现。
@Prajwal，你能解释一下你的观点吗

标签： javascript html css angularjs sass

【解决方案1】：

您可以使用 angularjs 中的一个名为 ng-style 的工具。

这里是一个例子：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">Welcome</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myObj = {
        "color" : "white",
        "background-color" : "blue",
        "font-size" : "60px",
        "padding" : "50px"
    }
});
</script>
</body>

参考：https://www.w3schools.com/angular/ng_ng-style.asp

【讨论】：

感谢@Matheus，但我需要它用于多伙伴选择器（.button、.link、.menu、a），但我无法跟踪它们（我的意思是我没有 HTML访问）
在stackoverflow上看一下这个主题的第一个答案stackoverflow.com/questions/1720320/…你也可以使用 var myEl = angular.element( document.querySelector( 'div' ) ); myEl.addClass('yourClassNameCreate');
不错，但也需要 HTML 访问权限才能添加 id (document.getElementById('someElementId')
我认为您可以使用 Jquery 轻松解决您的问题，但您只说（Angularjs、核心 JS 或 SASS）。对吗？
是的，我知道那种方式.. $(multipal selectors).style() 但如果我可以使用 Angularjs 或 SASS 来实现它会更好，谢谢。