Error: A Node was inserted somewhere it doesn't belong. Using ng-if


#1

Hi all.

I’m continuing to find the best way to build a full-resolution image gallery in ionic, and so far the best results have been to use an ion-slide-box in combination with ng-if to approximate some lazy loading techniques. It’s not perfect, but it’s the best I’ve got so far. Unfortunately, I’m getting a strange error on the loading of my photoView template.

I’m using an in-line template to preload the template (though haven’t figured out how to preload the controller and retain the controller state when using the route provider, but that’s another topic). My in-line template is as follows:

<script type="text/ng-template" id="templates/photoView.html">
<ion-pane >
    <ion-slide-box active-slide="currentSlide" show-pager="false" does-continue="true" auto-play="false" on-slide-changed="slideChanged(index)">
        <ion-slide ng-repeat="selectedPhoto in selectedPhotos" >
            <ion-content style="background:black;" ng-if="(selectedPhoto.myIndex >= (currentSlide-1) && selectedPhoto.myIndex <= (currentSlide+1)) || (selectedPhoto.myIndex == 0) || (selectedPhoto.myIndex == selectedPhotos.length - 1)" >
                <div on-hold="openPhotoModal($index, selectedPhoto)" >
                    <img ng-src="{{selectedPhoto.path}}" class="galleryImgFull" />
                </div>

            </ion-content>
        </ion-slide>
    </ion-slide-box>
</ion-pane>
</script>

My controller:

app.controller('PhotoViewCtrl', function($scope, $rootScope, $state, $timeout, $ionicNavBarDelegate, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicNavBarDelegate, TagTemplates, cordovaReady, selectedBundles, allBundles) {
	console.log('PhotoViewCtrl');
	$scope.currentSlide = 1;
  	
  	$ionicNavBarDelegate.showBar(false);
	// $scope.currentSlide = $rootScope.selectedBundleIndex;
	$scope.selectedBundles = selectedBundles.get();
	$scope.windowHeight = $(window).height() + "px";

	$scope.imageWidth = $(window).width() + "px";
	$scope.imageHeight = $(window).height() + "px"; 		
	
	console.log($scope.windowHeight);

	var selectedPhotos = [];
	var selectedThumbs = [];
	var myIndex = 0;
	for (var a in $scope.selectedBundles) {
		for (var b in $scope.selectedBundles[a].attributes.filePaths) {
			if (mobileOn) {
				var photoObj = {
					path: $scope.selectedBundles[a].attributes.filePaths[b], 
					thumbpath: $scope.selectedBundles[a].attributes.thumbPaths[b],
					bundle: $scope.selectedBundles[a],
					myIndex: myIndex
				}
				selectedPhotos.push(photoObj);
				myIndex++;				
			} else {
				selectedPhotos.push({
					path: 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg',
					thumbpath: 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg',
					bundle: $scope.selectedBundles[a],
					myIndex: myIndex
				});
				myIndex++;
			}
			selectedThumbs.push($scope.selectedBundles[a].attributes.thumbPaths[b]);
		}
	}

	$scope.selectedPhotos = selectedPhotos;
	
	for (i = 0; i<selectedThumbs.length; i++) {
		if ($rootScope.selectedPhotoThumbPath == selectedThumbs[i]) {
			$scope.currentSlide = i;
			$scope.selectedPhoto = $scope.selectedPhotos[i];
		}
	}
	console.log('selected photos', $scope.selectedPhotos);
	console.log('selected index', $scope.currentSlide);
	// console.log($scope.currentSlide);
  	$scope.$watch('currentSlide', function() {
       		console.log('hey, currentSlide has changed to: ' + $scope.currentSlide);
   		});

  	// console.log('update');
  	// $ionicSlideBoxDelegate.update();
  	// console.log('slide to: ', $scope.currentSlide);
  	// $ionicSlideBoxDelegate.slide($scope.currentSlide, 0);

  	$scope.slideChanged = function(index) {
  		
  		console.log("index: ", index);
  		$scope.currentSlide = index;
  		// $ionicSlideBoxDelegate.update();
  	}
});

For each selected photo I get the following (similar) error:

Error: A Node was inserted somewhere it doesn't belong.
    at ionic.views.Scroll.ionic.views.View.inherit.__createScrollbars (http://code.ionicframework.com/nightly/js/ionic.bundle.js:4713:26)
    at ionic.views.Scroll.ionic.views.View.inherit.initialize (http://code.ionicframework.com/nightly/js/ionic.bundle.js:4209:10)
    at ionic.views.View (http://code.ionicframework.com/nightly/js/ionic.bundle.js:3766:21)
    at new child (http://code.ionicframework.com/nightly/js/ionic.bundle.js:3225:43)
    at new <anonymous> (http://code.ionicframework.com/nightly/js/ionic.bundle.js:40127:38)
    at invoke (http://code.ionicframework.com/nightly/js/ionic.bundle.js:12926:17)
    at Object.instantiate (http://code.ionicframework.com/nightly/js/ionic.bundle.js:12937:23)
    at http://code.ionicframework.com/nightly/js/ionic.bundle.js:16191:28
    at prelink (http://code.ionicframework.com/nightly/js/ionic.bundle.js:40984:11)
    at nodeLinkFn (http://code.ionicframework.com/nightly/js/ionic.bundle.js:15614:13) <!-- ngIf: (selectedPhoto.myIndex > ionic.bundle.js:18926
(anonymous function) ionic.bundle.js:18926
(anonymous function) ionic.bundle.js:16273
nodeLinkFn ionic.bundle.js:15617
compositeLinkFn ionic.bundle.js:15034
nodeLinkFn ionic.bundle.js:15628
compositeLinkFn ionic.bundle.js:15038
publicLinkFn ionic.bundle.js:14943
boundTranscludeFn ionic.bundle.js:15057
controllersBoundTransclude ionic.bundle.js:15655
ngRepeatAction ionic.bundle.js:29327
$watchCollectionAction ionic.bundle.js:21255
Scope.$digest ionic.bundle.js:21384
Scope.$apply ionic.bundle.js:21649
listener ionic.bundle.js:41257
triggerEvent ionic.bundle.js:777
tapGesture ionic.bundle.js:1674
detect ionic.bundle.js:1355
bindDomOnTouch ionic.bundle.js:904
Error: A Node was inserted somewhere it doesn't belong.

Any thoughts?