Angular의 요소JS 지시어

Angular의 요소JS 지시어

클래스가 요소에 추가되면 해당 요소에 다른 클래스를 추가합니다.클래스가 삭제되면 요소를 삭제합니다.기본적으로 일부 부트스트랩 클래스를 각도 형식의 검증 클래스에 매핑하고 있지만 클래스가 요소에서 추가/삭제될 때 코드를 실행하는 방법을 알 수 없습니다(클래스 변경이 무한 루프되지 않도록 주의).

제 지령에 대해 지금까지 말씀드린 내용은 다음과 같습니다.

.directive('mirrorValidationStates', ['$log', function($log) {
  function link(scope,element,attrs) {
    scope.$watch(element.hasClass('someClass'), function(val) {
      var classMap = {
        'popupOn': 'has-error',
        'ng-valid': 'has-success'
      };

      for (var key in classMap) {
        if (element.hasClass(key)) {
          $log.info("setting class " + classMap[key]);
          element.parent().addClass(classMap[key]);
        } else {
          $log.info("removing class " + classMap[key]);
          element.parent().removeClass(classMap[key]);
        }
      }
    });
  }
  return {
    link: link
  };
}]);

그러니까 기본적으로는popupOn요소에 추가됩니다.has-error부모 요소에 부트스트랩클래스를 설정합니다.언제popupOn제거되었습니다. 제거하려고 합니다.has-error.

앵귤러에서 이런 일이 일어나려면 내가 뭘 놓쳤지?명령어를 사용하지 않고 ng-class를 사용하는 것이 아닐까요?

감사합니다!

여기서 작업하다

클래스 변경을 따르기 위해 이 구성을 시도할 수 있습니다.

$scope.$watch(function() {return element.attr('class'); }, function(newValue){});

해당 워치에 대한 클래스 통찰력을 추가하거나 제거하면 클래스 속성 값을 변경하지 않는 클래스 추가 호출이 한 번 더 발생한다는 점에 유의하십시오.

하지만 더 좋은 방법은 ng-class를 사용하는 것이라고 생각합니다.예를 들어 'popupOn' 클래스를 추가하려는 순간 일부 스코프 값($128.disc = true)을 설정한 다음 다음과 같이 부모 및 자식 요소에 ng-class를 지정합니다.

<div ng-class={'has-error': (popup==true)}>
    <div id="patient" ng-class={'popupOn': (popup==true)}>test</div>
    <button ng-click="addClass()">addClass</button>
    <button ng-click="removeClass()">removeClass</button>
</div>

이러한 클래스를 삭제할 때는 $124.disp 값을 false로 설정하기만 하면 됩니다.

ng클래스를 만지작거리다

클래스를 추가/제거합니다.

  function addClass() {
      var element = angular.element('#nameInput');
      element.addClass('nameClass');
  };

  function removeClass() {
      var element = angular.element('#nameInput');
      element.removeClass('nameClass');
  };

언급URL : https://stackoverflow.com/questions/21693064/monitor-for-class-changing-on-element-in-angularjs-directive