addClass() doesn't work with getElementById in AngularJS

Question

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.

The element directive itseld;
The view, to add/remove margin;

This is my html structure:

<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.removeClass is not a function

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

sp00m · Accepted Answer · 2016-01-04 16:49:19Z

4

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

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

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

answered Jan 4, 2016 at 16:49

sp00m

49k31 gold badges152 silver badges263 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

celsomtrindade Over a year ago

Thanks! It worked. Didn't knew about it, and since the console was showing the dom correctly, i didn't knew what to do.

sp00m Over a year ago

@CelsomTrindade Side question: why are you using setTimeout()? Whatever you're trying to achieve, it's quite dangerous, e.g. if the user scrolls before elView has been set.

celsomtrindade Over a year ago

I was still testing. But when I try to get the element (which is a ngView) it's still not loaded. Any way to fix this?

sp00m Over a year ago

What if you put the <ag-toolbar /> below the <div /> rather than above?

celsomtrindade Over a year ago

Then the layout will not be as expected.

Collectives™ on Stack Overflow

addClass() doesn't work with getElementById in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related