How can I hide an element when the page is scrolled?
A basic directive would look like this. One key point is you'll need to call scope.$apply()
since scroll will run outside of the normal digest
cycle.
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(); }); };});
I found this jsfiddle which demonstrates it nicely http://jsfiddle.net/88TzF/