ng-show funktioniert nicht auf Fenster scroll

Question

Ich soll ein Element über dem HTML-Dokument anzeigen. Wenn der Benutzer scrollt und das Element die Ansicht verlässt, sollte ich am Ende der Seite dasselbe Element mit einem anderen Stil anzeigen. Ich habe eine einfache Scroll-Funktion implementiert und ng-show auf das untere Element gesetzt, um zu schießen, sobald das oberste Element außer Sichtweite ist.

var tester = document.getElementsByClassName('recommendationTable')[0]; 

window.onscroll = function() { 
vm.itemShow = checkVisible(tester); 
// $scope.apply(); 
console.log(checkVisible(tester)); 
}; 

function checkVisible(elm) { 
var rect = elm.getBoundingClientRect(); 
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); 
return !(rect.bottom < 0 || rect.top - viewHeight >= 0); 
} 

Hier ist der HTML-Code (erste und zweite Element jeweils):

<table class="pull-right col-sm-9 recommendationTable"></table> 

<table class="pull-right col-sm-12 recommendationTableBottom" ng-show='! 
{{vm.itemShow}}'></table> 

Obwohl vm.itemShow schließlich zeigt 'falsch' in der Konsole, wenn das erste Element aus der Sicht geht, tut es nicht die ng-show im zweiten Element auslösen. Wenn ich die Größe des Fensters ändere, wird die ng-show ausgelöst, obwohl der ng-show-Wert gleich bleibt (false). Wie kann ich ng-show auslösen, wenn vm.itemShow von "wahr" zu "falsch" wechselt?

Answer 1

Versuchen, indem Sie wie folgt vor,

<table class="pull-right col-sm-12 recommendationTableBottom" ng-show="vm.itemShow"></table> 

ODER

Sie $ timeout() Func innerhalb OnScroll Ereignis (innerhalb Timeout-Funktion ändern, um Ihren Umfang Variablenwert) verwenden können, (bcoz $ timeout wird Griff Digest-Zyklus)