如何从AngularJS控制器逻辑中更改HTML元素的CSS类

Question

我正在寻找一个从AngularJS控制器的逻辑内部更改HTML元素的CSS类的示例

在控制器中，类似这样：

function myFunc() {
  //do a calculation
  //result is 3
  //change the class of HTML element with id="3" to add class="hidden"

我无法使用ngClick执行此操作，因为控制器决定要更改哪个元素，而不是用户。

如果我想从80年代重新创建Simon game，我会让控制器选择一个随机数1-4，然后点亮HTML元素，用户必须在一定数量的时间点击它时间。

choice = Math.floor(Math.random() * 4) + 1;
if ( choice == 2 ) {
  lightUpBlue();
  setTimeout(turnOffBlue();, 2000);
}

如何编写lightUpBlue()来更改HTML文档中按钮的颜色，并可能更改超链接或其他属性？

提前致谢。

Answer 1

在html代码中使用ng-class。

元素HTML

ng-class="myFunction"

ng-class

的文档

控制器的

scope.myFunction = function() {
}

controller的文档 scopes

的文档

Answer 2

最佳做法是避免从控制器或服务内部操纵DOM元素。为此，您可以编写自定义指令。

你可以修改任何元素，如：

angular.element(document.querySelector('[id="3"]')).addClass('hidden');

Answer 3

ngShow看起来是隐藏元素的最佳解决方案。