Когда пользователь прокручивает свое окно браузера ниже определенной точки, я переключаю класс #page div.

То, что я сделал до сих пор, прекрасно работает:

http://jsfiddle.net/eTTZj/29/

    
    



app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 element.addClass('min');
                 console.log('Scrolled below header.');
             } else {
                 element.removeClass('min');
                 console.log('Header is in view.');
             }
        });
    };
});

(когда они прокручивают свое окно под заголовком 100px, класс переключается)

Хотя, поправь меня, если яЯ ошибаюсь, я чувствую, что это не правильный способ сделать это с Angular.

Вместо этого я предположил, что лучший способ сделать это - использовать ng-класс и сохранить логическое значение в области видимости. Что-то вроде этого:

    
    



app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
        });
    };
});

Хотя это не является динамическим, если я изменю значение scope.boolChangeClass в обратном вызове прокрутки, то ng-класс не обновляется.

Итак, мой вопрос: как лучше переключать класс #page, используя AngularJS, когда пользователь прокручивает ниже определенной точки?