在 Angular 中添加 CSS 类答案

【问题标题】：Add CSS class in Angular在 Angular 中添加 CSS 类
【发布时间】：2016-01-09 06:23:26
【问题描述】：

我有两个地方需要动态添加一个名为myClass 的css 类。我只想在$root.myBool 为真时添加此类。我让他们中的一个使用这个：

<ion-side-menu-content class="ng-class: $root.myBool ? 'myClass' : ''">

但我不能让另一个工作。问题来了，上面这个是直接用cshtml写的。但是另一个是在 javascript 文件中使用 angularJS 添加的。另一个在.js 文件var container = jqLite("<div class='class1 class2'>"); 中看起来像这样我想在class2 之后添加myClass，类似于：

var container = jqLite("<div class='class1 class2 ng-class: $root.myBool ? 'myClass' : '''>");

我尝试过，但无法成功。希望有人能帮忙..

我还有第二个想法来实现这一点，因为myClass 实际上只是一种风格：

.myClass {
    top: 78px;
}

所以我在想也许我也可以更改 javascript 中的 top 属性。所以我会添加这样的课程var container = jqLite("<div class='class1 class2 myClass'>"); 然后在我更改myBool的javascript中更改top属性：

$scope.myBool = false;
//get 'myClass' somehow and change the attribute 'top' here.

我知道对于 jQuery，我可以做到 $('.myClass').css("top", "0px");。但是我这里用的是ionic，所以语法不一样，这是我的问题。

所以我可以想到两种方法来做到这一点，让任何一种工作对我来说都绰绰有余。非常感谢！

【问题讨论】：

您是否尝试过使用$scope.$apply()？
Angular 不会解析容器中的 ng-class，因为它不“知道”它。如果您将此元素添加到 DOM，编译循环会读取它，但这实际上取决于您的工作上下文。最佳实践是，如果您使用 JQueryLite 操作 DOM 元素，您应该在指令中执行此操作，在这种情况下您应该使用 $compile(container)
@lanGabes 我的代码中有$compile(container) 部分。就像你说的，它不能解决 ng-class。

标签： javascript css angularjs

【解决方案1】：

如果你动态生成 HTML，你需要$compile它：

$compile(container)(scope);

此外，我认为以ng-class="{'myClass': $root.myBool}" 的形式将ngClass 编写为自己的属性比class 属性中的形式更简洁且不易出错。

把它绑在一起：

var container = "<div class='class1 class2' ng-class=\"{'myClass': $root.myBool}\">"; 
element.append($compile(container)($scope);

编译前不需要通过jqLite运行。

【讨论】：

好像已经按照代码编译好了。我可以在代码中看到element.append($compile(container)($scope.$new()));。当我像这样添加它时，似乎它只是无法编译 ng-class 部分：var container = jqLite("<div class='class1 class2 ng-class: $root.myBool ? 'myClass' : '''>");
我认为它没有编译成功，是不是因为语法错误。我注意到这行代码中有' 和'' 问题。有几个'' 和'，我有点做不出来......也许这就是为什么？
为什么要编译到新创建的子作用域（$scope.$new()）？如果你想使用$compile，我相信你不需要jqLite()-part，只需使用一个字符串：var container = "<div class='class1 class2' ng-class=\"{'myClass': $root.myBool}\">";然后element.append($compile(container)($scope);
这些都是项目现有的代码。我对此很陌生，我只是想在上面添加一个新课程，我相信我的团队不会希望我改变旧东西，因为一切都很好。他们只想要这个新功能。也许是因为我没有在课堂上使用`\`。让我先试试。
哦，如果你遇到编译错误，你需要告诉我们......你知道如何查看Firefox/Chrome的开发者控制台，对吧？

【解决方案2】：

在我看来，您可以简单地使用ngClass 和ngStyle：

控制器：

$scope.topPx = '20px';

HTML：

<ion-side-menu-content ng-class="{'myClass': $root.myBool}" ng-style="{'top': topPx}">

【讨论】：

工作正常。我的问题是第二个。
在 javascript 中生成。