AngularJS: why can't I toggle a class binding to the window scroll event?

Question

I am trying to toggle a class on an element if/when the page has scrolled.

I have followed this SO thread but when I try chaining in a directive, I don't even get to the log statements.

Trying to follow along with the angular docs, I've got my component.js file like this. I can get the log statements to show, but the class never gets toggled.

dashboard.component.js

angular.module('dashboard')
    .component('dashboard', {
    'templateUrl': 'dashboard/dashboard.template.html',
    controller: function dashboardController($scope, $window, $mdSidenav) {
        var primaryAppBar = angular.element(document.querySelector('#primaryAppBar'));

        angular.element($window).bind('scroll', function () {
            if (this.pageYOffset > 0) {
                console.log('add shadow');
                $scope.boolChangeClass = true;
            } else {
                console.log('remove shadow');
                $scope.boolChangeClass = false;
            }
        });
        ...

app-bar.template.html

<md-toolbar id="primaryAppBar" ng-class="{'md-whiteframe-1dp':boolChangeClass}">
...

Is the scope you're modifying in dashboard.component.js the same as in app-bar.template.html? I see nothing to indicate that it is. — Harris
– Harris, Commented Jan 5, 2017 at 17:56
@HarrisWeinstein It should be painfully obvious how much I have to learn. That was in fact the problem. Thank you so much! — Damon
– Damon, Commented Jan 5, 2017 at 18:29
Glad it worked! I'll add an answer so you can mark this as resolved. — Harris
– Harris, Commented Jan 5, 2017 at 19:54

Harris · Accepted Answer · 2017-01-05 21:01:37Z

0

The scope in dashboard.component.js is not the same scope as in app-bar.template.html. Either have them be under the same controller or provide something to pass the boolChangeClass variable.

edited Jan 5, 2017 at 21:01

answered Jan 5, 2017 at 19:56

Harris

1,78516 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: why can't I toggle a class binding to the window scroll event?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related