javascript - 在 Angular 中添加 CSS 类

Question

我有两个地方需要添加一个名为 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'>");我想添加 myClass在 class2 之后，像这样的东西:

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'>");然后更改 top我更改的 javascript 中的属性 myBool :

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

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

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

Answer 1

如果您即时生成 HTML，则需要对其进行$compile:

$compile(container)(scope);

• SO question

• Explanation and examples

此外，我认为以 ng-class="{'myClass': $root.myBool}" 的形式将 ngClass 写成它自己的属性比在 class 属性中形成。

将它们结合在一起:

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

在编译之前不需要通过 jqLit​​e 运行它。