Jak ukryć element podczas przewijania strony?

Question

Ok, jestem trochę zakłopotany.

Próbuję myśleć o kanciastej drodze pochodzącej z tła jQuery.

Problem: Chciałbym ukryć stały element, jeśli okno nie jest przewijane. Jeśli ktoś przewinie stronę, chciałbym ukryć ten element.

Próbowałem utworzyć niestandardową dyrektywę, ale nie mogłem go uruchomić, ponieważ zdarzenia przewijania nie były uruchamiane. Myślę o prostym kontrolerze, jak poniżej, ale nawet nie działa.

Kontroler:

.controller('MyCtrl2', function($scope,appLoading, $location, $anchorScroll, $window) { 
    angular.element($window).bind("scroll", function(e) { 
     console.log('scroll') 
     console.log(e.pageYOffset) 
     $scope.visible = false; 
    }) 
}) 

WIDOK

<a ng-click="gotoTop()" class="scrollTop" ng-show="{{visible}}">TOP</a> 

POKAZ NA ŻYWO http://www.thewinetradition.com.au/new/#/portfolio

Wszelkie pomysły będą bardzo mile widziane.

Answer 1

Podstawowa dyrektywa wyglądałaby tak. Kluczową kwestią jest, aby wywołać scope.$apply(), ponieważ scroll będzie działał poza normalnym cyklem digest.

app = angular.module('myApp', []); 
app.directive("scroll", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      scope.visible = false; 
      scope.$apply(); 
     }); 
    }; 
}); 

Znalazłem jsfiddle który demonstruje go ładnie http://jsfiddle.net/88TzF/