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指令为什么不对元素的子元素进行任何类或样式更改？

1 个答案: