AngularJS 지시어는 요소의 자식에 대한 클래스 또는 스타일 변경이 적용되지 않는 이유는 무엇입니까?

Question

현재 응용 프로그램의 DOM 변경에 대한 지시문을 사용하고 있습니다. 나는 상태 변경을 숨기기 위해 요소의 버튼을 원합니다.

HTML :

이

<div account layout="row" layout align="start center"> 
    <md-button id="accountIcon" class="md-icon-button"> 
     <md-icon aria-label="account" layout-align="center center"> 
      <i class="material-icons">account_circle</i> 
     </md-icon> 
    </md-button> 

지침 :

angular.module("app") 
.directive('account', ($document) => { 
    return { 
     restrict: 'A', 
     link: (scope, element, attrs) => { 
      scope.$on('hideAccount',() => { 
       angular.element($document[0].querySelector('#accountIcon')).addClass('ng-hide); 
      }); 
     } 
    }; 
}); 

이벤트가 수신되고 기능이 시작됩니다. 다음도 은가 작동하지 않습니다.

.hide { 
    display: none; 
} 

는 희망 당신은 요점을 얻을 :

angular.element(document.querySelector('#accountIcon')).addClass('ng-hide'); 
angular.element(document.querySelector('#accountIcon')).css('display', 'none'); 
angular.element(document.querySelector('#accountIcon')).addClass('hide'); 
var accountIcon = element.children()[0]; 
accountIcon.addClass('ng-hide'); 

. 분명히 있지만, 곧 추가 더 많은 버튼이있을 수 있기 때문에 전체 요소를 숨기기 위해 찾는 게 아니에요

element.addClass('ng-hide') 

다음 는 작업을했다. (계정 아이콘이 아님). 도움이나 도움을 준 문서. 고맙습니다.

Answer 1

콘솔의 오류를 확인 했습니까?

element.children()[0]은 .addClass() 메서드가없는 DOM 노드입니다. .addClass() 방법을 사용하려면이 수행

element.children().eq(0).addClass('ng-hide'); 

을하지만 문제는 남아있다 - 왜 당신이 없을 때 DOM 조작을 사용하도록 비켜가는거야? 지시문에 ng-hide 지시문을 사용할 수 없습니까? ID로 요소에 액세스하고 이러한 모든 DOM 조작을 수행하는 것은 불필요한 것 같습니다.