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, Apr 26 '16 at 07:20
What is your real problem? What do you want to achieve and wht is not working? — kabaehr, Apr 26 '16 at 08:11
In scroling when div finished it should call a function to render more divs but apply function never gets called @kabaehr — Asad, Apr 26 '16 at 08:21

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

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?

edited May 23 '17 at 12:24

Community

1
1

answered Apr 26 '16 at 07:39

Zac Braddy

611
5
12

check out this fiddle @Zac i tool the scroly code from here [http://jsfiddle.net/ADukg/4831/] – Asad Apr 26 '16 at 07:43
Link is broken @Asad – Zac Braddy Apr 26 '16 at 07:45
here is question link check out fiddle from answer @Zac [http://stackoverflow.com/questions/21989923/scroll-event-is-not-fired-inside-directive-angular-js] – Asad Apr 26 '16 at 07:46
Ok so what is happening in that fiddle that you want to make work in your code. I'm not clear on what you think is going wrong. – Zac Braddy Apr 26 '16 at 07:50
ys i used scrolly directive from that fiddle . Im new in angular So on scrolling when div finished i want to call showmore function that is `scope.$apply(attrs.scrolly)` . return undefines – Asad Apr 26 '16 at 07:53
That fiddle already does what you're asking. When it gets into the if statement `scope.$apply(attrs.scrolly)` gets called. The return value of this function call is never used because it's not important, but it would also be undefined. What happens when that $apply function gets called is the showMore() function is called and the words "show more triggered" are logged to the console. The difference between the fiddle and your code is that your code alerts instead but your showMore function should still be getting called. – Zac Braddy Apr 26 '16 at 07:57
thats the problem my show more function never gets called :( dnt know y ? – Asad Apr 26 '16 at 08:05
Make your own fiddle with your code in it and I'll take a look. – Zac Braddy Apr 26 '16 at 08:24

score 0 · Answer 2 · answered Apr 26 '16 at 07:22

0

It should be $scope.$apply

You missed the $ before scope

answered Apr 26 '16 at 07:22

Vinod Bhavnani

2,185
1
16
19

thats not a issue @Vinod – Asad Apr 26 '16 at 07:25
parameter also a scope. – Asad Apr 26 '16 at 07:25
The parameter to his function is called `scope` not `$scope` as is convention with controllers. I think the use of `scope` as a parameter to the link function comes from the fact that a lot of the link function examples given in the angular docs do this. – Zac Braddy Apr 26 '16 at 07:27

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

2 Answers2