Ajout d'une classe à l'élément en utilisant Angular Js

Vous pouvez utiliser ng-class pour ajouter conditionnelles des classes.

HTML

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

Dans votre contrôleur (pour vous assurer que la classe n'est pas affichée par défaut)

$scope.alpha = false;

Maintenant, lorsque vous cliquez sur le bouton, le $scope.la variable alpha est mise à jour et ng-class ajoutera la classe 'alpha' à votre bouton.

Utilisez le modèle MV *

Basé sur l'exemple que vous avez joint, Il est préférable dans angular d'utiliser les outils suivants:

• ng-click - évalue l'expression lorsque l'élément est cliqué (Lire Plus)
• ng-class - placez une classe basée sur l'une expression booléenne (Lire Plus)

Par exemple:

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

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

Cela vous donne un moyen facile de découpler votre application. par exemple, vous n'avez aucune dépendance entre le div et le button.

Lisez ceci pour en savoir plus sur le modèle MV*

Essayez ceci..

Si jQuery est disponible, angulaire.element est un alias pour la fonction 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>

Ref:https://docs.angularjs.org/api/ng/function/angular.element

Première chose, vous ne devriez pas faire de manipulation DOM dans la fonction du contrôleur. Au lieu de cela, vous devez utiliser des directives à cette fin. la fonction de lien de la directive est disponible pour ce genre de choses seulement.

AngularJS Docs: création d'une Directive qui manipule le DOM

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

Change callback peut être utilisé comme écouteur pour l'événement click.

querySelector n'est pas de angulaire mais c'est dans document et c'est dans tous les éléments DOM (coûteux). Vous pouvez utiliser ng-class, ou à l'intérieur de la directive ajouter addClass sur l'élément:

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