Question

我有一个包含此代码的html页面

<p id="roonnameDiv" >{{chatRoom}}</p>

和app.js，代码如下。它正确反映了价值，但如果我尝试在运行时用颜色设置它，它不会反映在html页面上

$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};

我甚至尝试使用ng-color但是徒劳无功。让头部使用html-unsafe标签在运行时将html5代码添加到角度变量中，也许我可以使用它来提供元素样式但找不到任何示例。

基本上要求是使用角度框架在roonnameDiv中使用各种样式（颜色，大小和字体）

..................编辑............................

我使用了以下答案所建议的ngstyle

$ scope。$ parent.chatRoom = $ stateParams.roomId; $ scope.myStyle = {color：“green”};

然而输出文本只是纯灰色。在探索它的时候，我发现它通过身体继承了一些风格。关闭正文颜色标记只会将文本变为黑色而不是绿色。

以下是身体

<body ng-app="xyz" ng-controller="AppController" class="ng-scope">

这是体型

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

我想要特定的样式类来应用不同的文本组件，而不需要考虑整体的体型。你能建议怎么做吗？

Answer 1

您可以使用ng-style指令。

标记

<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>

在控制器中

$scope.myStyle = {color: "green", background: "blue"} //在此处写下所有必需的样式。

Answer 2

试试这个

<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>