문서 높이에 따라 각도의 div를 숨기려면 어떻게해야합니까?

Question

다른 곳의 경우 나에게 용서해주십시오 ...

나는 중간에 버려진 프로젝트에 들어갔다. 이전에는 각도로 작업하지 않았으므로 문서가 뷰포트보다 큰지 여부에 따라 "맨 위로 돌아 가기"버튼을 숨기거나 표시해야합니다. 여러 가지 접근 방식을 시도하고 성공적으로 작동하도록 아무 것도 얻을 수 없습니다.

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

나는 또한 간단한 작업 등을 위해 jQuery를의 사용을 해제합니다 :

Answer 1

먼저 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>

Answer 2

가 왜 이런 일을하려고하지 않습니다 사전에

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

감사 : 이것은 내 최신 시도 그 값들을 가져온다.