Question

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

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

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

Answer 1

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

选择DOM中的元素是

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

添加类似.addClass('alpha');

的类

最后

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

Answer 2

您可以使用button添加条件类。

HTML

ng-class

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

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

现在，当您单击该按钮时，$ scope.alpha变量将更新，ng-class将添加＆＃39; alpha＆＃39;按到你的按钮。

Answer 3

使用MV *模式

根据你附上的例子， 使用以下工具时角度更好：

// DON'T DO THIS EITHER Object obj="a string"; Integer i=(Integer) obj; - 点击元素时评估表达式（Read More）
ng-click - 根据给定的布尔表达式（Read More）

例如：

ng-class

这为您提供了一种简单的方法来解耦您的实现。例如您在<button ng-click="enabled=true">Click Me!</button> <div ng-class="{'alpha':enabled}"> ... </div>和div之间没有任何依赖关系。

<强> Read this to learn about the MV* Pattern

Answer 4

试试这个..

如果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

Answer 5

首先，你不应该在控制器功能中进行任何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事件的侦听器。

Answer 6

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

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

Answer 7

对于Angular 7用户：

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

TS班

blurredStatus = true

HTML

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

Answer 8

在 HTML 中

要添加名为 alpha 的类，请先将诸如 showAlpha 之类的任何变量赋值为 false，然后再进行设置单击时为 true。

<div data-ng-class="{'alpha' : showAlpha}"> </div>

<button ng-click="addClass()"> </button>

在 JS 文件中

$scope.showAlpha = false;

$scope.addClass = function(){
   $scope.showAlpha = true;
}

Answer 9

尝试此代码

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

click the link and understand more

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

使用Angular JS将类添加到元素

9 个答案:

使用MV *模式