창 스크롤에 ng-show가 작동하지 않습니다.

Question

html 문서 상단에 요소를 표시해야합니다. 사용자가 스크롤하고 요소가 뷰 밖으로 나가면 페이지의 아래쪽에 다른 스타일로 같은 요소를 표시한다고 가정합니다. 간단한 스크롤 기능을 구현하고 맨 아래 요소에 ng-show를 놓으면 맨 위 요소가 보이지 않게되는 즉시 실행됩니다. vm.itemShow 결국 디스플레이 '거짓'콘솔의 첫 번째 요소는보기를 벗어나면, 그것은 않는 경우에도

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

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

: 여기

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

는 HTML 코드 (각각 제 1 및 제 2 요소)입니다 두 번째 요소에서 ng-show를 트리거하지 않습니다. 창 크기를 조정하면 ng-show 값이 동일하게 유지 되더라도 ng-show가 트리거됩니다 (false). vm.itemShow가 true에서 false로 바뀔 때마다 어떻게 ng-show를 트리거합니까? 당신이 onscroll 이벤트에서 $ 제한 시간() FUNC를 사용할 수 있습니다

(타임 아웃 함수 내에서이 범위 변수 값을 변경)

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

또는

다음과 같이 변경하여

Answer 1

시도, (bcoz에게 $ 타임 아웃 처리합니다 다이제스트주기)