각도 JS를 사용하여 요소에 클래스 추가

각도 JS를 사용하여 요소에 클래스 추가

jQuery의 버튼을 클릭해서 클래스를 추가하는 방법을 알고 있습니다.

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

나는 각도 js로 같은 것을 달성하고 싶다.myController1이라는 컨트롤러가 있습니다.누가 내가 쉽게 할 수 있도록 도와줄 수 있나요?

AngularJS에는 JQLite라고 불리는 메서드가 있으므로 사용할 수 있습니다.링크를 참조해 주세요.

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가 표시됩니다.알파 변수가 업데이트되고 ng-class가 버튼에 'alpha' 클래스를 추가합니다.

MV* 패턴 사용

첨부한 예에 따라 다음 도구를 사용하는 것이 좋습니다.

• ng-click - 요소를 클릭했을 때 식을 평가합니다(자세한 내용은 읽기).
• ng-class - 지정된 부울식을 기반으로 클래스를 배치합니다(자세한 내용은 읽기).

예를 들어 다음과 같습니다.

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

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

이를 통해 구현의 분리를 쉽게 할 수 있습니다.예를 들어, 두 서버 사이에 의존 관계가 없습니다.div및 그button.

MV* 패턴에 대한 자세한 내용은 여기를 참조하십시오.

이거 드셔보세요.

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 : DOM을 조작하는 디렉티브 작성

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

변경 콜백을 클릭이벤트의 리스너로 사용할 수 있습니다.

querySelectorAngular가 아니라 안에 있어요.document모든 DOM 요소(비싼)에 포함되어 있습니다).사용할 수 있습니다.ng-class또는 내부 지시 추가addClass요소:

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

Angular 7 사용자:

여기에서는 부울만 사용하여 "blured"라는 이름의 단순한 클래스 속성을 활성화 또는 비활성화할 수 있습니다.따라서 이 기능을 사용할 필요가 있습니다.[ngClass].

TS 클래스

blurredStatus = true

HTML

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

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;
}

이 코드를 사용해 보세요.

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

링크를 클릭하여 자세한 내용을 확인하세요.

주의: angular.element() 함수는 이 perameters angular.element(document).find(...) 또는 $document.find()를 사용하여 documnet 위치를 직접 선택하거나 document 등의 표준 DOM API를 사용하지 않습니다.query Selector All()

언급URL : https://stackoverflow.com/questions/30410402/adding-class-to-element-using-angular-js