ng-show无法处理窗口滚动

Posted 2021-05-04

我应该在html doc上面显示一个元素。如果用户滚动并且元素离开视图，我应该在页面底部显示具有不同样式的相同元素。我已经实现了一个简单的滚动功能，并且只要顶部元素不在视图中，就会在底部元素上放置ng-show。

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代码（分别是第一个和第二个元素）：

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

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

即使vm.itemShow在第一个元素离开视图时最终在控制台中显示“false”，它也不会触发第二个元素中的ng-show。当我调整窗口大小时，即使ng-show值保持不变（false），也会触发ng-show。每当vm.itemShow从true变为false时，如何触发ng-show？

答案

尝试改变如下，

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

要么

你可以在onscroll事件中使用$ timeout（）func（在超时函数内改变你的范围变量值），（bcoz $ timeout将处理摘要周期）