Ng-if Not Working, Ng-show Works

I have an html where I must show AngularJS template only when I reach the bottom of the page (I've implemented infinite scrolling). The first page comes from the server. So I've to

Solution 1:

ng-if creates a new child scope

to keep a watch on model in ng if the thumb rule is:

DON'T USE SCOPE AS MODEL e.g.

ng-if='showStuff' //here my scope is model **INCORRECT**
ng-if='someObject.showStuff' // ** CORRECT **

use an object property in ng-model then even if ng-if creates the new child scope parent scope will have the changes.

on the other hand ng-show does not create new child scope it works in parent scope.

in you case please change

$scope.item_gallery = new ItemGallery();

to

$scope.someObject.item_gallery = new ItemGallery();

then it should work.

Solution 2:

Ok I've the solution.

Console was saying me:

Cannot read property 'rel' of null.

This happened because the first thing I was doing inside var ItemGallery = function(), was to change the href for the next page (next page comes from ajax request). The href for the next page is located within a <div> in the bottom of the current page.

The point is that I'm changing the href for the next page, BEFORE the current page has been loaded.

So..

window.onload = function () {
                this.nextPageQueryString = document.getElementById("nextPage").rel;

                this.next_href = this.domain_url + this.nextPageQueryString;
            };

NOTE: this has solved my problem, but I find it very strange. ng-if wasn't able to see the 'rel' property for the next href and I got the empty page. Now Angular can see the 'rel' property and it all works fine.

ng-if should work apart of what I have in the html.

I still can't understand the behavior of ng-if.