AngularJS 스크롤로 div 숨기기

AngularJS를 처음 사용했습니다. 사용자가 div "B"를 스크롤 할 때 AngularJS에서 div "A"를 숨기고 싶습니다. 현재 ng-click을 사용하여 div "B"를 클릭 할 때 div "A"를 숨길 수는 있지만 AngularJS를 사용하는 스크롤에서는 아무 것도 할 수 없습니다. JQuery를 사용하여 div를 숨길 수는 있지만 AngularJS로 할 수있는 방법이 있습니까?AngularJS 스크롤로 div 숨기기

업데이트 :

나는 스크롤 지시어를 생성 $ 창으로 첨부. 전체 창을 스크롤하면 div가 숨겨 지지만 특정 div가 스크롤 될 때 숨기려고합니다. 현재 구현 된 내용은 다음과 같습니다.



    app.directive("scroll", function ($window) { 
     return function(scope, element, attrs) { 
      angular.element($window).bind("scroll", function() { 
       if (this.pageYOffset >= 10) { 
        scope.hideVs = true; 
       } else { 
        scope.hideVs = false; 
       } 
       scope.$apply(); 
      }); 
     }; 
    });

출처

2013-05-02 Ali Hasan Imam

창에 스크롤 이벤트를 첨부 @ganaraj에 의해 제안 값을 설정하고 NG 수준 = {같은 표정으로 쇼 숨기기 클래스와 사용 NG-클래스를 만들기 위해 $ 구문 분석을 사용하여

http://jsfiddle.net/Tx7md/

Here is a version true : '활성', false : 비활성} [scrollpos = 'diva'] –

http://docs.angularjs.org/api/ng.directive:ng 숨기기 및 http://docs.angularjs.org/에 대해 알고 계십니까? api/ng.directive : ngShow – Arcayne

예, ng-hide 및 ng-show에 대해 알고 있습니다. 클릭 이벤트에 대해 표시/숨길 수 있지만 스크롤 이벤트에 대해 어떻게 수행 할 수 있습니까? @Arcayne –

왜 이렇게하고 싶은지 잘 모르겠지만 원하는 생각으로 jsfiddle을 만들었습니다.

나는 약간 지시어를 수정 :

app.directive("scroll", function() { 
     return function(scope, element, attrs) { 
      angular.element(element).bind("scroll", function() { 
       scope[attrs.scroll] = true; 
       scope.$apply(); 
      }); 
     }; 
    });

지금을 참조하십시오 사업부하지 창에 스크롤 이벤트에 결합 할 수있다. 또한 변수가 설정 한 변수를 변경하여 스크롤 지시문에 제공된 값을 변수 이름으로 사용합니다.

출처

2013-05-02 10:54:49

감사. 이것이 해결책입니다. 나는 그걸 알아 냈고 당신의 대답을 보았습니다. –

오 대단하네요, 내 대답을 정확하다고 표시해 주시겠습니까? –

@DerekEkins [attrs.scroll] = true를 수행하면 안됩니다. (왜냐하면 model.name과 같은 중첩 된 객체로 작동하지 않기 때문에) 대신 "$"parse 서비스를 사용하는 것이 "올바른"방법입니다. – ganaraj

jQuery를 사용하지 않으려한다고 가정합니다.

jqLite 함수 만 사용하여 div A에서 div A에 대한 참조를 얻을 수 없다면 지시문을 사용하는 것이 완벽한 해결책이되지는 않습니다.

div B의 경우 "do-hide-on-scroll"과 div A의 경우 "get-hidden-on-scroll"의 두 가지 지시문을 만들 수 있습니다.이 경우 '스크롤'이벤트가 발생합니다 div B에 입력하고 $rootScope.emit을 사용하여 각도 이벤트을 생성하여 "div B is scrolling"이벤트를 최상위 상위 범위로 보냅니다. 부모 범위가 이것을 받으면 $rootScope.broadcast은 모든 자식 범위와 동일하며 그 중 하나는 div A입니다. Div A의 "get-hidden-on-scroll"지시문은이 이벤트를 수신 한 다음 div를 숨기고 div를 다시 표시하기 위해 0.5 초 동안 $ timeout을 설정합니다. 이벤트를 다시 수신하면 시간 초과가 다시 설정됩니다.

jQuery를 사용하는 것과 비교하면 상당히 복잡합니다. 동의합니다. 하지만 하루가 끝나면 성능이 향상 될 것입니다. 전체적으로 앵귤러로 단호하게 단단한 견과류 중 하나입니다. 좋은 질문!

출처

2013-05-02 10:51:46

AngularJS 스크롤로 div 숨기기

답변

관련 문제