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?