AngularJS : Why the data is not displayed in view may I use $scope.apply?

Question

I am getting data from service and display on view using ng-repeat .Actually I am getting event when user scroll to bottom mean when user reached to bottom I will do something.When It reached to bottom I am changing the contend of my array .I am getting the correct contend in ng-repeat array (display array) but it is not reflect on view why ? May I use $scope.apply() or $scope.digest()

Here is my code

http://plnkr.co/edit/XgOxJnPXZk4DneJonlKV?p=preview

Here I am changing the contend of my display array which is not reflect on view

if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {
            if(scope.var<scope.arrays.length)
            scope.display=[];
            var nextvar =++counter;
            var increment=counter+1
            console.log("nextvar:"+nextvar+"increment:"+increment)
            scope.display=scope.arrays[nextvar].concat(scope.arrays[increment]);
           console.log(scope.display)
          }

yes, in this case you do need to use `scope.$apply()`, because you are actually replacing the `display` array with a new array, so the old listeners on `display` are no longer valid. however, once that's resolved, you have the issue of your counter being reset every pass through the loop, leaving you only able to scroll down once... — Claies, Jun 10 '15 at 03:27
how I will slove this issue ? could you please explain more and solve my issues — user944513, Jun 10 '15 at 03:45
yes I check the value of variable become same how I make static variable @Claies please give better anser — user944513, Jun 10 '15 at 04:00
I never intended to provide an answer, only a comment that might alert you to the fact that you have larger issues in your code — Claies, Jun 10 '15 at 04:05
I **don't** have a solution! I merely offered a comment, I never committed to providing an answer. — Claies, Jun 10 '15 at 05:03

score 1 · Accepted Answer · answered Jun 10 '15 at 04:21

1

As @Claies mentioned you should use apply(). Though the digest() would probably have worked as well.apply() calls digest() internally. He also mentioned that your variable that seems to be storing the page number gets reset to 0 each time you scroll. You should store that in a scope variable outside that handler. I tried to fix with minimum change

http://plnkr.co/edit/izV3Dd7raviCt4j7C8wu?p=preview

 .directive("scrollable", function() {
    return function(scope, element, attrs) {
      var container = angular.element(element);
      container.bind("scroll", function(evt) {
        console.log('scroll called'+container[0].scrollTop);
        var counter = scope.page;
        if (container[0].scrollTop <= 0) {
          if (scope.var > 0)
            scope.display = scope.arrays[--scope.var].concat(scope.arrays[scope.var+1]);

        }

        if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {

          if (scope.var < scope.arrays.length)
            scope.display = [];
          var nextvar = ++counter;
          var increment = counter + 1
          console.log("nextvar:" + nextvar + "increment:" + increment)
          scope.display = scope.arrays[nextvar].concat(scope.arrays[increment]);
          console.log(scope.display)
          scope.page = counter;
        }
        scope.$apply();
      });
    };
  })

generally I would have implemented this differently. For example by having a spinning wheel on the bottom of the list that when displayed you get the rest of data. It is difficult to give you a full working plunker. Probably you should have multiple JSON files in the plunker, each containing the data for one page so that we can add the data to the bottom of the display list.

answered Jun 10 '15 at 04:21

n00b

1,832
14
25

great answer ...!! Actually My motive is to load data when user scroll to bottom ..your answer is correct but still it is issue.Issue is user not recognise that we are change data .In other word issue of scroll position .scroll position move to top when we load data – user944513 Jun 10 '15 at 04:30
Scroll position remain at that point where we load data...Example we are on "L" when new data load ..But when we load more data it goes to "R".it remain on "L" when I load more data .so that it look like we are not loading new data – user944513 Jun 10 '15 at 04:34
can we maintain the scroll position ? In other words when user scoll to bottom it load data more .But I need scroll position remain same when it was previous or before loading – user944513 Jun 10 '15 at 04:36
I will try this first.http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page – n00b Jun 10 '15 at 11:03
did you have any answer .if yes please post your answer here http://stackoverflow.com/questions/30752982/why-scroll-position-goes-to-bottom-when-new-data-load – user944513 Jun 10 '15 at 11:06
But you did it using jquery I need for angularjs – user944513 Jun 10 '15 at 11:07
You can scroll to any element using the above sample, but in AngularJS where you don't know what that element would be it is not that easy – n00b Jun 10 '15 at 11:07
@brain what is best way to load huge data like 2000 element ..Without using pagination.Actually in mobile my app become slow.That why I am searching to load and remove data from dom concept – user944513 Jun 10 '15 at 11:08
I think I understand your question which is like this: While the volume of data is easy to load from network or file, we don't want to create all dom elements to avoid slowness. how can we dynamically add/remove them to dom as the user scrolls in an AngularJS project? I would implement that as a 'pull to refresh' from bottom and top. I have not done it in AngularJS before but apparently someone has created this plugin https://github.com/mgcrea/angular-pull-to-refresh – n00b Jun 10 '15 at 11:22
Maybe put this specifically as a Question in stack overflow to get a better answer. This question you have created is focused on $scope.$apply() and now that you have sorted that out, you can focus on your performance issue. – n00b Jun 10 '15 at 11:24
Also remember if performance becomes a major issue for your mobile app, maybe consider not using Angular. The Angular compile and controller overhead is sometimes too much for some apps – n00b Jun 10 '15 at 11:25

score 0 · Answer 2 · answered Jun 10 '15 at 04:03

0

After you modify display array you just have to call scope.$apply() so that it runs the $digest cycle and updates the view. Also you need the initialize scope.var either in your controller or the directive and modify it conditionally.

I dont if this is what you want. I have modified the plunker take a look. http://plnkr.co/edit/J89VDMQGIXvFnK86JUxx?p=preview

answered Jun 10 '15 at 04:03

ShankarSangoli

69,612
13
93
124

Thanks for answer ..But there is a issue what @claie said ..when I scroll to bottom it change my array using scope .apply .But when again I scroll my nextvar and increment value not change why – user944513 Jun 10 '15 at 04:12
why when I scroll again why my variable not show 2, 3 value o f nextvar ,increment .I need to load more data when user scroll to bottom – user944513 Jun 10 '15 at 04:13
how to change counter variable ..? mean I need to change counter variable when user scroll to top and bottom – user944513 Jun 10 '15 at 04:14

AngularJS : Why the data is not displayed in view may I use $scope.apply?

2 Answers2