css - 如何将 Angular json模型设置为css

Question

我在应用程序的其他地方生成了这段代码

"PHcolour":"rgb(4, 31, 156)","Ctextcolour":"rgb(59, 214, 252)"

我使用波浪括号 {{CtextColour}} 得到了很好的数据(来自模型)

我想在我的页面上有一个可以更改网站配色方案的按钮。我使用 ng-click

为其他东西工作

现在我遇到的问题是 css 不接受 {{}} 所以我尝试的方法是这样的

<style media="screen">
.custom { background-color: #fff; }
.custom h1 { color: {{Ctextcolour}}; }
.custom h2 { color: {{Ctextcolour}}; }
.custom h3 { color: {{Ctextcolour}}; }
.custom h4 { color: {{Ctextcolour}}; }
.custom h5 { color: {{Ctextcolour}}; }
.custom h6 { color: {{Ctextcolour}}; }
.custom p { color: {{Ctextcolour}}; }
.custom th { background-color: #c3cced; color: {{Ctextcolour}};}
.custom.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #c3cced ) !important; color: {{Ctextcolour}} !important;}
</style>

哪个不起作用(并且还在我的 IDE (Atom) 中将我的其余 html 代码变成粉红色

我试着把它切换到这个去除了粉红色，但还是没用!

<ng-style media="screen">
.custom { background-color: #fff; }
.custom h1 { color: {{Ctextcolour}}; }
.custom h2 { color: {{Ctextcolour}}; }
.custom h3 { color: {{Ctextcolour}}; }
.custom h4 { color: {{Ctextcolour}}; }
.custom h5 { color: {{Ctextcolour}}; }
.custom h6 { color: {{Ctextcolour}}; }
.custom p { color: {{Ctextcolour}}; }
.custom th { background-color: #c3cced; color: {{Ctextcolour}};}
.custom.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #c3cced ) !important; color: {{Ctextcolour}} !important;}
</ng-style>

按钮的 html 是这样的:

<button type="button" class="btn btn-info" ng-click="colorScheme = 'custom'" ng-model="eventData.theme">Custom Theme
    </button>

检查元素显示没有向按钮添加任何内容，也根本没有 javascript 错误。

谢谢

编辑 http://plnkr.co/edit/8V35DqflzX9pkFcmpesb?p=preview

Answer 1

查看 ngStyle 的文档页面.这是您可以使用它的方式:

HTML

<p ng-style="myStyle">Text</p>
<button ng-click="set()">set</button>
<button ng-click="clear()">clear</button>

Controller

$scope.data = {"PHcolour":"rgb(4, 31, 156)","Ctextcolour":"rgb(59, 214, 252)"};

$scope.set = function(){
    $scope.myStyle = { color: $scope.data.Ctextcolour } 
};

$scope.clear = function(){
    $scope.myStyle = undefined; 
};

See plunker .