Why changing AngularJS variable successfully but having no effect? [duplicate]

Question

I am trying to make an infinite-scrolling table. I have:

<tr ng-repeat="x in names | limitTo:quantity">
    <td>{{ x.Density }}</td>
    <td>{{ x.Pressure }}</td>
<tr>

At the end of the table I have a load more button. This works ok:

<button class="btn" ng-click="loadMore()">Load more</button>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('customersCtrl', function($scope) {
    $scope.quantity = 7;
    $scope.loadMore = function () {   
        $scope.quantity += 7; 
    }
    $scope.names = <?php echo json_encode($records); ?>;
});
</script>

While this has no effect:

window.onscroll = function () {   
   if($(window).scrollTop() + window.innerHeight == $(document).height()){
        $scope.quantity += 7; 
   }
}

The weirdest thing is, if I delete loadMore() and use only window.onscroll function and keep the button, it doesn't show more result on scroll to bottom but starts to work if I click the button. Yes, even if I have no loadMore() function! I am sure the window.onscroll is firing on the bottom because $scope.quantity keeps increasing.

I am using jQuery mobile if this has anything to do with the problem. I don't think it does because it works fine on button click.

How to make this work only with window.onscroll function?

Community · Accepted Answer · 2017-05-23 12:02:29Z

0

That's because your onScroll code isn't running inside the angular digest, which is what detects changes and updates views, notifies watchers, etc ...

You should put the onscroll logic inside a directive and do something like this: https://stackoverflow.com/a/14880862/93321

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jul 5, 2015 at 19:40

Angelo Vargas

1,9911 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why changing AngularJS variable successfully but having no effect? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related