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'>");中看起来像这样我想在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'>"); 然后更改我更改top的javascript中的myBool属性：

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

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

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

Answer 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运行它。

Answer 2

在我看来，您只需使用ngClass和ngStyle：

控制器：

$scope.topPx = '20px';

HTML：

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

在Angular中添加CSS类

2 个答案: