Добавление класса к элементу с помощью Angular JS

Ответ 1

У AngularJS есть некоторые методы, называемые JQlite, поэтому мы можем использовать его. см. ссылка

Выбрать элемент в DOM

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

добавить класс как .addClass('alpha');

Итак, наконец

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

Ответ 2

Вы можете использовать ng-class для добавления условных классов.

HTML

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

В вашем контроллере (чтобы убедиться, что класс не отображается по умолчанию)

$scope.alpha = false;

Теперь, когда вы нажимаете кнопку, переменная $scope.alph обновляется, а ng-класс добавляет к вашей кнопке класс alpha.

Ответ 3

Используйте шаблон MV *

На основании приведенного вами примера, В angular лучше использовать следующие инструменты:

• ng-click - оценивает выражение при щелчке элемента ( Подробнее)
• ng-class - поместите класс, основанный на заданном булевом выражении ( Подробнее)

, например:

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

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

Это дает вам простой способ отделить вашу реализацию. например у вас нет зависимости между div и button.

Прочитайте это, чтобы узнать о шаблоне MV *

Ответ 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

Ответ 5

Во-первых, вы не должны делать никаких манипуляций с DOM в функции контроллера. Вместо этого вы должны использовать директивы для этой цели. Функция директивной ссылки доступна только для такого рода вещей.

Документы AngularJS: Создание директивы, которая управляет DOM

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

Изменение обратного вызова может быть использовано в качестве прослушивателя для события клика.

Ответ 6

querySelector не от Angular, а в document и во всех элементах DOM (дорого). Вы можете использовать ng-class или внутри директивы add addClass для элемента:

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

Ответ 7

Для пользователей Angular 7:

Здесь я покажу вам, что вы можете активировать или деактивировать простой атрибут класса с именем "blurred" с помощью просто логического значения. Поэтому вам нужно использовать [ngClass].

Класс TS

blurredStatus = true

HTML

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

Ответ 8

попробуй этот код

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

нажмите на ссылку и поймите больше

Примечание: имейте в виду, что функция angular.element() не найдет непосредственно выбранное местоположение документа с помощью этого параметра. Angular.element(document).find(...) или $ document.find() или использует стандартные API DOM. Например, document.querySelectorAll()