addClass（）不适用于AngularJS中的getElementById

I'm trying to manipulate an element class within a directive. The directive is of a toolbar and it's supposed to add a class to 2 elements after some scroll.

我正在尝试操纵指令中的元素类。该指令是一个工具栏，它应该在一些滚动之后将一个类添加到2个元素。

The element directive itseld;
元素指令itseld;
The view, to add/remove margin;
视图，添加/删除保证金;

This is my html structure:

这是我的html结构：

<ag-toolbar class="ag-toolbar--sec"></ag-toolbar>
<div ui-view="app" autoscroll="false" id="appView"></div>

And this is my directive:

这是我的指示：

function agToolbar($window) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var elView;
            setTimeout(function(){ 
                elView = document.getElementById("appView");
            }, 400);

            angular.element($window).bind("scroll", function() {
                if (this.pageYOffset >= 128) {
                    element.addClass('scroll');
                    elView.addClass('agMargin');
                } else {
                    element.removeClass('scroll');
                    elView.removeClass('agMargin');
                };
            });
        }
    };
}

In the console I keep getting the error:

在控制台中我不断收到错误：

elView.addClass is not a function

elView.addClass不是一个函数

elView.removeClass is not a function

elView.removeClass不是一个函数

But the element.addClass is working fine. Any ideas why?

但是element.addClass运行正常。有什么想法吗？

1 个解决方案

#1

addClass belongs to jqLite (or jQuery if available), see https://docs.angularjs.org/api/ng/function/angular.element.

addClass属于jqLite（或jQuery，如果可用），请参阅https://docs.angularjs.org/api/ng/function/angular.element。

That is, you need to wrap the DOM element in a jqLite/jQuery element:

也就是说，您需要将DOM元素包装在jqLite / jQuery元素中：

elView = angular.element(document.getElementById("appView"));

#1