In this exercise, we finish our implementation of infinite scrolling. We now already have service support data pagination, let's see how to use it in controller and view.
We add two $scope mehods in controller. These methods are triggered by <ion-infinite-scroll> directive.
The loadMoreData method calls MovieService.getMovies to load movie data into $scope.movies.
Please note we need to call $scope.$broadcast('scroll.infiniteScrollComplete') in this method to let ionic know the data have been loaded.
The $scope.$broadcast dispatches an event name downwards to all child scopes. In this case, we are dispatching scroll.infiniteScrollComplete
message to the ionic-infinite-scroll directive.
This is an example showing inter-commnucation between different components in Angular. This comes in very handy developing event-driven application.
Another method $scope.hasMoreData is needed to notify <ion-infinite-scroll> if there are more data. It calls MovieService.hasMore to do that.
Now we have everything ready, adding the directive to view is actually the easiest part. The <ion-infinite-scroll> expects a
ng-if binding to a function to check if there is more data, and on-infinite binding to a function to load more data.
Just wire them with the right functions, the infinite scrolling will work.