在运行时在angularjs中设置文本颜色答案

【问题标题】：Styling text color in angularjs at runtime在运行时在angularjs中设置文本颜色
【发布时间】：2015-05-04 05:30:05
【问题描述】：

我有一个带有此代码的 html 页面

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

和一个带有以下代码的 app.js。它正确地反映了该值，但是如果我尝试在运行时使用颜色设置它的样式，它不会反映在 html 页面上

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

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

本质上，要求是使用 Angular 框架在 roonnameDiv 中具有各种样式（颜色、大小和字体）

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

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

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

但是输出文本只是纯灰色。在通过 chorome inspector 探索它时，我发现它通过 body 继承了一些样式。关闭正文颜色标签只会将文本变为黑色而不是绿色。

下面是身体

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

我希望特定的样式类适用于不同的文本组件，而不影响整体的正文样式。你能建议怎么做吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

您可以使用 ng-style 指令。

在标记中

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

在控制器中

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

有关 ng 样式指令的更多信息，请访问：https://docs.angularjs.org/api/ng/directive/ngStyle

【讨论】：

没用。文本只是显示为灰色作为正文的默认颜色。
你能为此创建 plnkr/fiddle 吗？
plnkr.co/edit/v8f0Z3owuvl3XvUaUs5d?p=preview@Vinay K。我已尽力反映价值观，但它不能正确反映我的颜色问题
有多个问题。 1. 不包含 ui-router js 文件。 2 指定控制器的错字。 3. ui-view 没有在标记中声明。 4. myStyle 没有设置在合适的范围内。在这个 plnkr 中修复了所有这些：plnkr.co/edit/SSd3kMQzTHaPzS4NOo2Y?p=preview
我有 /** * version v0.2.13 * link angular-ui.github.com * license MIT License, opensource.org/licenses/MIT */ 在单个 js 文件中与 angular.js 合并和缩小。但是您的解决方案解决了我的问题。看起来我在 $scope.$parent.myStyle 添加 $parent 时遗漏了。现在完美运行。