Gdy użytkownik przewija okno przeglądarki poniżej pewnego punktu, przełączam klasę #page div.

To, co do tej pory zrobiłem, działa dobrze:

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

<div ng-app="myApp" scroll id="page">

    <header></header>
    <section></section>

</div>

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.');
             }
        });
    };
});

(gdy przewijają swoje okno poniżej nagłówka, 100px, klasa jest przełączana)

Chociaż popraw mnie, jeśli się mylę, uważam, że nie jest to właściwy sposób na zrobienie tego w Angular.

Zamiast tego założyłem, że najlepszą metodą na to byłoby użycie klasy ng i zapisanie wartości boolowskiej w zakresie. Coś takiego:

<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">

    <header></header>
    <section></section>

</div>

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.');
             }
        });
    };
});

Chociaż nie jest to dynamiczne, jeśli zmienię wartość scope.boolChangeClass w wywołaniu zwrotnym scroll, wtedy klasa ng nie jest aktualizowana.

Więc moje pytanie brzmi: jak najlepiej przełączać klasę #page, używając AngularJS, gdy użytkownik przewija poniżej pewnego punktu?