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 es from the server. So I've to put an ng-if for that first page, because the user could have a bookmark with "address/page=5", and the html template for the first page from the server doesn't have to be in the page.

Now I have the url "address", specific for the page from the server.

ng-if doesn't work, the page is empty, but if I use ng-show it all works fine.

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
    <div id="itemsGrid" ng-controller="aCtrl" infinite-scroll='item_gallery.nextPage()' infinite-scroll-distance='1' infinite-scroll-disabled=''> 

        <div ng-show="server_page()"> 
        //here the first page template

JS

myApp.controller('MyCtrl', function($scope, ItemGallery) {
    $scope.item_gallery = new ItemGallery();
    ...
}

myApp.factory('ItemGallery', function($http) {
    var ItemGallery = function() {
    ...
        ItemGallery.prototype.nextPage = function() {
        ...
        }
    return ItemGallery;
}

If I do ment

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

ng-if works fine, the page is correctly showed.

The page is showed when I use: ng-if + line mented, ng-show.

NOTE:

ng-if="true" doesn't work, it's not a problem of the function used, ng-if="server_page()" I don't want to use ng-show.

Why ng-if doesn't work? What's the problem with that line? How can I make it working?

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 es from the server. So I've to put an ng-if for that first page, because the user could have a bookmark with "address/page=5", and the html template for the first page from the server doesn't have to be in the page.

Now I have the url "address", specific for the page from the server.

ng-if doesn't work, the page is empty, but if I use ng-show it all works fine.

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
    <div id="itemsGrid" ng-controller="aCtrl" infinite-scroll='item_gallery.nextPage()' infinite-scroll-distance='1' infinite-scroll-disabled=''> 

        <div ng-show="server_page()"> 
        //here the first page template

JS

myApp.controller('MyCtrl', function($scope, ItemGallery) {
    $scope.item_gallery = new ItemGallery();
    ...
}

myApp.factory('ItemGallery', function($http) {
    var ItemGallery = function() {
    ...
        ItemGallery.prototype.nextPage = function() {
        ...
        }
    return ItemGallery;
}

If I do ment

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

ng-if works fine, the page is correctly showed.

The page is showed when I use: ng-if + line mented, ng-show.

NOTE:

ng-if="true" doesn't work, it's not a problem of the function used, ng-if="server_page()" I don't want to use ng-show.

Why ng-if doesn't work? What's the problem with that line? How can I make it working?

• javascript
• angularjs
• angular-ng-if

• 1 can u add a fiddle/pluner to this please, is easier to follow – Radu Commented Apr 1, 2016 at 13:30

2 Answers 2

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.

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 es 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.