How can i turn this Jquery Code into a angularJs directive :
var lastScrollTop = 0;
$("div").scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('img').animate({top: '-=10'}, 10);
} else {
$('img').animate({top: '+=10'}, 10);
}
lastScrollTop = st;
});
You shouldn't use selector here because link function provides the compiled DOM angular DOM. You can play with that DOM as you were doing in your code. Markup
<div scroll-div>
Content here
</div>
Directive
app.directive('scrollDiv', function () {
return {
link: function (scope, element, attrs) {
var lastScrollTop = 0;
element.scroll(function (event) {
var st = element.scrollTop();
if (st > lastScrollTop) {
$('img').animate({
top: '-=10'
}, 10);
} else {
$('img').animate({
top: '+=10'
}, 10);
}
lastScrollTop = st;
});
}
});
Don't know what your markup looks like, what your app is called or, well anything else but something like this should work:
angular.module('myApp')
.directive('myScroll',
['$window', 'jQuery',
function($window, $) {
return {
restrict: 'A',
link: function ($scope, elem, attrs) {
$(elem).scroll(function (event) {
var st = $(this).scrollTop();
if (st > $scope.lastScrollTop) {
$('img').animate({top: '-=10'}, 10);
} else {
$('img').animate({top: '+=10'}, 10);
}
$scope.lastScrollTop = st;
});
}
};
}]);
Example markup:
<div myScroll>This is just some stupid text unworthy of being read, so please don't waste
<br>your time reading this nonesense.
<br>Hey! why are you still reading this garbage?
<br>Stop reading now and start doing something useful, such as getting this leaf to move up
<br>while you scroll this page.
<br>On second thought, maybe just continue reading.
<br>This might be more productive then whatever
<br>it is you were doing before.</div>
NOTE: restrict: 'A' restricts the directive to Attributes on an element.
See Angular Directive Docs for more info
