scope.$apply is undefined , not working in scrolly directive

Question

Im trying to use scrolly directive for my div. when user scrol down and end of div come I want to call a function. it gives me undefined on Scope.$apply function ? please any one help . Thankx 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()" >

here is app and controller

 var app = angular.module('smac',[]);
 app.controller('asd',function ($http,$scope) {
   $scope.showMore = function(){

     alert('div finished');
  }
  });

and the directive is

   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
            }
            });
    }
};
 });

That console log is printing the return value of scope.$apply which I would bet is undefined. If you are wanting to check is scope.$apply itself is undefined you'd need to use. console.log(scope.$apply); — Zac Braddy
What is your real problem? What do you want to achieve and wht is not working? — kabaehr
In scroling when div finished it should call a function to render more divs but apply function never gets called @kabaehr — Asad

Zac Braddy Zac Braddy · Accepted Answer · 2016-04-26T07:39:45

If I'm not mistaken, the reason why your scope.$apply function call returns undefined is because your showMore function has no return value. If you take a look at the source code for the $apply function in angular you will see a number of implementations but they all, more or less just call the $eval function:

From angular's source

function $apply(expr) {
    try {
        return $eval(expr);
     } catch (e) {
         $exceptionHandler(e);
     } finally {
          $root.$digest();
      }
 }

Here is a link to another SO question about what $eval does

So I would assume that what angular is trying to do evaluate the value of the scrolly attr as an angular expression which is executing your function and because your function is not returning anything you are getting undefined.

That of course is an explanation for why you are getting undefined as a return value from scope.$apply but not an answer you the question of why you need to know the return value at all?

scope.$apply is undefined , not working in scrolly directive

2 Answers