使用Angular JS将类添加到元素

Posted 2023-01-26

我知道如何在'jQuery'中单击按钮添加类

$('#button1').click(function()
 $('#div1').addClass('alpha');
);

我想通过角度js实现同样的目的。我有一个控制器 - myController1。有人可以帮助我做到这一点吗？

答案

AngularJS有一些名为JQlite的方法，所以我们可以使用它。见link

选择DOM中的元素是

angular.element( document.querySelector( '#div1' ) );

添加像.addClass('alpha');这样的类

最后

var myEl = angular.element( document.querySelector( '#div1' ) );
myEl.addClass('alpha');

另一答案

您可以使用ng-class添加条件类。

html

<button id="button1" ng-click="alpha = true" ng-class="alpha: alpha">Button</button>

在您的控制器中（以确保默认情况下不显示该类）

$scope.alpha = false;

现在，当您单击该按钮时，$ scope.alpha变量将更新，ng-class将为您的按钮添加'alpha'类。

另一答案

使用MV *模式

基于您附加的示例，使用以下工具时角度更好：

• ng-click - 在单击元素时计算表达式（Read More）
• ng-class - 根据给定的布尔表达式放置一个类（Read More）

例如：

<button ng-click="enabled=true">Click Me!</button>

<div ng-class="'alpha':enabled"> 
    ...
</div>

这为您提供了一种简单的方法来解耦您的实现。例如你在div和button之间没有任何依赖关系。

Read this to learn about the MV* Pattern

另一答案

试试这个..

如果jQuery可用，angular.element是jQuery函数的别名。

var app = angular.module('myApp',[]);

app.controller('Ctrl', function($scope) 

    $scope.click=function()

      angular.element('#div1').addClass("alpha");
    ;
);
<div id='div1'>Text</div>
<button ng-click="click()">action</button>

参考：https://docs.angularjs.org/api/ng/function/angular.element

另一答案

首先，你不应该在控制器功能中进行任何DOM操作。相反，您应该为此目的使用指令。指令的链接功能仅适用于那些类型的东西。

AngularJS Docs : Creating a Directive that Manipulates the DOM

app.directive('buttonDirective', function($timeout) 
  return 
    scope: 
       change: '&'
    ,
    link: function(scope, element, attrs) 
      element.bind('click', function() 
        $timeout(function() 
          // triggering callback
          scope.change();
        );
      );
    
  ;
);

更改回调可以用作click事件的侦听器。

另一答案

querySelector不是来自Angular，而是来自document，并且它在所有DOM元素中（昂贵）。您可以在元素上使用ng-class或inside指令添加addClass：

myApp.directive('yourDirective', [function()
    return 
        restrict: 'A',
        link: function(scope, elem, attrs) 
            // Remove class
            elem.addClass("my-class"); 
        
    

另一答案

对于Angular 7用户：

在这里，我向您展示您可以使用布尔值激活或停用名为“blur”的简单类属性。因此你需要使用[ngClass]。

TS类

blurredStatus = true

HTML

<div class="inner-wrapper" [ngClass]="'blurred':blurredStatus"></div>

另一答案

试试这段代码

<script>
       angular.element(document.querySelectorAll("#div1")).addClass("alpha");
</script>

click the link and understand more

注意：请记住，angular.element（）函数将无法使用此参数angular.element（document）.find（...）或$ document.find（）直接选择任何documnet位置，或使用标准DOM API ，例如document.querySelectorAll（）