如何根据文档高度以角度隐藏 div

Question

如果这是在其他地方，请原谅我...

我进入了一个中途放弃的项目。我以前没有在角度下工作过，需要隐藏/显示一个"返回顶部"按钮，具体取决于文档是否高于视口。我已经尝试了几种不同的方法，但无法使任何东西成功工作。这是我的最新尝试：

$(document).ready(function() {
    if ($(document).height() > $(window).height()) {
        console.log("document height is greater");
        $('#arrowUp').show();
    } else {
        console.log("window height is lesser");
        $('#arrowUp').show();
    }
});

提前致谢

Answer 1

你为什么不尝试这样的事情：

<div id="arrowUp" ng-show="$(document).height() > $(window).height()" >
  /
</div>

我也会认为jQuery用于一个微不足道的任务是获取这些值。

Answer 2

首先，我强烈建议不要混合使用 Angular 和 jQuery - 两者都是 DOM 操作框架，它们会相互踩踏，在你尝试解决各种问题时会给你带来无尽的头痛。

这是一个非常人为的例子，说明基于高度显示或隐藏div的"角度"方式。您应该能够调整它以满足您根据窗口和文档高度差异显示箭头的需求(在内置代码段运行器中很难证明这一点(。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.maxHeight = 1200;
    $scope.windowOuterHeight = window.outerHeight;
    $scope.documentHeight = document.documentElement.clientHeight;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    Enter max height: <input type="text" ng-model="maxHeight">
  </div>
  <div ng-show="windowOuterHeight < maxHeight">
    Window Outer Height is {{windowOuterHeight}}px <br/><br/>
    Document Height is {{documentHeight}}px
  </div>
</div>