Angularjs 使用“角度”更改类设置

关于如何在元素上使用ng类和ng样式，有很多信息。但是我想知道是否有一种方法可以使用angular来更改类的设置

例如，假设您有一个css类，看起来如下所示：

.testclass {
    color: red;
    background-color: blue;
}

我想使用angular将color:red更改为color:black，而不将angular附加到HTMLDOM对象，而是通过类

好的，这不是一个非常有用的例子。我真正计划使用它的目的是隐藏ck editor类cle_top的一部分，我想在有人单击按钮时将整个类设置为隐藏，如果再次单击按钮则将其设置为可见

=========为了更清楚，这是我想隐藏的一点HTML=======

<span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; -webkit-user-select: none;"><span id="cke_8" class="cke_voice_label">
      Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_8" onmousedown="return false;">
           <span id="cke_11" class="cke_toolbar" aria-labelledby="cke_11_label" role="toolbar"><span id="cke_11_label" class="cke_voice_label">

但是我需要在HTML代码中添加角度钩子，而不是像在span中添加ng类那样添加角度钩子，这本来是一个简单的解决方案

附件是一个JSFIDLE，它显示了我的问题，正如您所看到的，工具栏按钮什么也不做。

现在哪种方法有效，它将不可见的类添加到跨度中，但是，它不会隐藏它正在查看的跨度。

---

在测试文本上使用相同的过程，它会工作…

为什么不在用户单击按钮时简单地为该元素关闭/打开类？编辑：您说过要将整个类设置为隐藏-我假设您的意思是删除该类

不过，为了回答您的问题，您可以使用document.styleSheets使用JavaScript来实现这一点

请参阅和it参考资料。它提到可能存在一些浏览器兼容性问题。我没有对此进行调查

---

编辑：“ng toggle”的编辑功能允许您用一个按钮隐藏或显示元素。

不知道任何可以编辑类本身的内容，但这可能不是您想要做的。其他选择包括：

1创建第二个类，该类位于CSS文件中第一个类之后，用于添加/更改所需的属性。例：

.testclass {
    color: red;
     background-color: blue;
 }
.newclass {
    color: green; // change property in first CSS class
    display: none; // or hide
}

然后有条件地应用第二类：

<div class="text-class" ng-class="{newclass: hideScopeFlag}">blah</div>

2如果您所做的只是隐藏某些内容，只需使用ng if、ng hide或ng show。例：

<div class="text-class" ng-hide="hideScopeFlag">blah</div>

或

---

在不影响样式表的情况下，最简单的解决方案是添加一个新规则，如

.visibleOff .testclass {
    color: black;
}

---

然后，您只需要在父元素（包装器或编辑器的body元素）上切换visibleOff类。

要隐藏DOM中的某些元素，还可以使用充当布尔值的$scope变量。您可以在默认情况下将其设置为false，然后单击按钮将其切换为true并返回

$scope.hidden = false;
$scope.toggleHide = function(){
$scope.hidden = !$scope.hidden;

}

在dom中，可以使用ng hide=hidden属性包装元素，如下所示：

<div ng-hide="hidden">...</div>
<button ng-click="toggleHide()">togglehide</button>

---

这里可以找到一个plunker示例：

如果有人想知道如何做到这一点，这可能对其他事情也很有用

创建了一个使用document.querySelector查找元素的函数，然后只需切换以打开或关闭，正如他们所说的，就是这样

$scope.toolBarVisible = function(){
    console.log("Changing visibility");
    var element = document.querySelector( '.cke_top' );
    console.log("Just to do some debugging we check " + element);
    var myEl = angular.element( element );
    myEl.toggle();
    element = document.querySelector( '.cke_bottom' );
    myEl = angular.element( element );
    myEl.toggle();

    var myEl2 = angular.element( document.querySelector( '.test' ) );
    myEl2.toggleClass("invisible")

}

对于那些仔细观察的人来说，是的，它也隐藏了底部，并且所有这些都不改变编辑器或代码。

---

希望有人觉得它有帮助

好的，应该很清楚，我想让自己省去一些麻烦，所以ckeditor有很多元素，包括id和class，我怀疑我是否可以在加载时更改它们，最好是我想避免这样做，所以我想我应该选择一个快捷方式，只需在整个工具栏cke_top的位置拾取类，然后将其设置为显示：none；瞧，我已经为用户隐藏了工具栏，如果他们想要它，再按一次，它就在那里。我不确定我是否完全理解你的意思，但也许你正在寻找的是ng风格？请参见以下链接中的实时示例，您可以使用此链接应用显示：无；单击。添加了有关该问题的一些评论。我的问题是我不能直接连接到对象来添加类。因此，如果我可以搜索dom树来提取对象并隐藏它或类似的东西。这似乎正是我要寻找的，但我如何按id或类添加VisbleOff类。如果你只针对当前浏览器，你可以使用纯javascript来实现它，“document.querySelectorelementId.classList.togglevisibleOff；”否则，请使用您选择的js框架。

$scope.toolBarVisible = function(){
    console.log("Changing visibility");
    var element = document.querySelector( '.cke_top' );
    console.log("Just to do some debugging we check " + element);
    var myEl = angular.element( element );
    myEl.toggle();
    element = document.querySelector( '.cke_bottom' );
    myEl = angular.element( element );
    myEl.toggle();

    var myEl2 = angular.element( document.querySelector( '.test' ) );
    myEl2.toggleClass("invisible")

}