Having trouble with the scrolly directive in my div. When the user scrolls down to the end of the div, I want to call a function. However, I'm getting 'undefined' when using Scope.$apply function. Can anyone help me out? Thanks in advance! Here is my HTML code:
<div id="container" style="
position:absolute;
top: 60px;
width: 100%;
left:0px;height:91%;overflow-y:scroll;" scrolly="showMore()" >
And here are the app and controller:
var app = angular.module('smac',[]);
app.controller('asd',function ($http,$scope) {
$scope.showMore = function(){
alert('div finished');
}
});
Lastly, here is the directive:
app.directive('scrolly', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var raw = element[0];
console.log('loading directive');
element.bind('scroll', function () {
console.log('in scroll');
console.log(raw.scrollTop + raw.offsetHeight >= raw.scrollHeight)
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attrs.scrolly)
console.log(scope.$apply(attrs.scrolly)); // this is undefined
}
});
}
};
});