AngularJS 指令为什么不对元素的子元素应用任何 class 或样式更改？

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

接收到事件并触发函数。以下也不工作。

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');

其中：

.hide {
    display: none;
}

希望您明白要点。以下有效：

element.addClass('ng-hide')

尽管很明显，我并不打算隐藏整个元素，因为很快就会添加更多按钮。（不仅仅是一个帐户图标）。任何帮助或文档表示赞赏。谢谢。

Answer 1

您检查控制台是否有错误？

element.children()[0] 是一个 DOM 节点，它没有 .addClass() 方法。要使用 .addClass() 方法，只需执行以下操作：

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

但问题仍然存在 - 为什么您在不需要时特意使用 DOM 操作？不能在指令中使用 ng-hide 指令吗？通过 ID 访问元素并进行所有这些 DOM 操作似乎是不必要的。

AngularJS 指令为什么不对元素的子元素应用任何 class 或样式更改？

AngularJS Directives why don't any class or style changes to children of the element apply?

angularjs

jqlite

ng-hide

angular-directive

angular-material