Bind class commuta su window scroll event

Quando un utente fa scorrere la finestra del browser sotto un certo punto, sto triggersndo la class del div #page.

Quello che ho fatto fino ad ora funziona bene:

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

(quando scorrono la loro finestra sotto l’intestazione, 100px, la class viene triggersta)

Anche se, correggimi se sbaglio, sento che questo non è il modo corretto di farlo con Angular.

Invece, presumevo che il miglior metodo per farlo sarebbe stato usare ng-class e memorizzare un valore booleano nell’ambito. Qualcosa come questo:

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

Sebbene non sia dinamico, se cambio il valore di scope.boolChangeClass nel callback di scorrimento, la class ng non si aggiorna.

Quindi la mia domanda è: come è meglio triggersre la class di #page, usando AngularJS, quando l’utente scorre al di sotto di un certo punto?