Getting error using ion-infinite-scroll : "TypeError: Cannot read property 'isNative' of null"

ionic-v1
1

I am trying to display a big list (sometimes around 1000 items) using ion-infinite-scroll directive. But the screen does not scroll and logs following error :

TypeError: Cannot read property ‘isNative’ of null
at link (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:52252:69)
at invokeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17046:9)
at nodeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:16556:11)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15905:13)
at publicLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15784:30)
at boundTranscludeFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15923:16)
at controllersBoundTransclude (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:16583:18)
at Object.ngIfWatchAction [as fn] (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:30775:15)
at Scope.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23070:29)
at Scope.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23333:24) (anonymous function) @ console-via-logger.js:173

Here is my html and controller code :

HTML:

<ion-view view-title="{{contactName}}">
<ion-list>
    <ion-item ng-repeat='message in messagesToBeDisplayed' class='item-text-wrap'>
    	<p>{{ message.text }}</p>
    </ion-item>
</ion-list>
<ion-infinite-scroll
	ng-if="moreDataCanBeLoaded()"
    on-infinite="loadMore()"
    distance="1%">
</ion-infinite-scroll>
</ion-view>

Controller:

angular.module('BusinessMessageListModule', ['BusinessContactServiceModule', 'infinite-scroll'])

.controller('BusinessMessageListController', function($scope, $stateParams, $window, BusinessContactService) {

    $scope.messages = BusinessContactService.getSelectedMessagePreviewListing();

    $scope.selectedMessage = BusinessContactService.getSelectedMessage();
    $scope.selectedBusinessContact = BusinessContactService.getSelectedBusinessContact();
    $scope.contactName = $scope.selectedBusinessContact.businessName;

  	$scope.itemsDisplayed = 0;

    $scope.loadMore = function() {
    	var count = $scope.itemsDisplayed + 10;
    	if (count > $scope.messages.length) {
    		count = $scope.messages.length;
    	};    	
    	$scope.itemsDisplayed = count;

    	$scope.messagesToBeDisplayed = $scope.messages.slice(0, $scope.itemsDisplayed);
    };

    $scope.loadMore();

    $scope.moreDataCanBeLoaded = function() {
    	if ($scope.messagesToBeDisplayed.length < $scope.messages.length) {
    		return true;
    	} else {
    		return false;
    	};
    };
});

Any pointer will be very helpful.

BTW: I’m testing on Lollipop device, using ionic 1.6.4

Thanks,

  • Tushar
2

you should wrap all stuff in an ion-view in an ion-content

3

wow… you noticed that correctly !! I overlooked that while making experiments.
Thanks a ton @bengtler :blush:

4

For me also same issue… But my ion-content is completely inside ion-view… but same error… Any guess ?

5

Please, show us the html code of your view :slight_smile: