Is ng-if not evaluated or I do not understand about ng-view clearly

Question

Go straight to the code and I will explain more along the question

I have the index.html file like this:

<body class="horizontal-menu">
<!-- Preloader -->
<div id="preloader">
    <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
</div>
<div ng-if="isLoading">
    <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
</div>
<section>
        <div class="contentpanel">
            <!-- content goes here... -->
            <error-page ng-if="error"></error-page>
            <div ng-view ng-if="!isLoading && !error"></div>
        </div>
    </div><!-- mainpanel -->
</section>

</body>

I want to implement the indicator for my page, you can see the <div id="status"><i class="fa fa-spinner fa-spin"></i></div> as well as ng-if="isLoading" line.

In the login component I have these line of code to change from login view to register view.

$scope.onRegister = function () {
    $rootScope.isLoading = true;
    $location.path(routes.REGISTER);
}

What I want is when changing the view from login view to register view, the indicator (spinner) is up. After that, in the register component code I have these lines to force the spinner off.

function registerController($scope, $rootScope, $location, $http) {
    $rootScope.isLoading = false;
}

But the spinner rounds endlessly.

I tried to read about $viewContentLoaded, and I put these line of code in my application (parent application) as well as the register controller.

$rootScope.$on('$viewContentLoaded', function (event) {
    $rootScope.isLoading = false;
})

It still does not help.

Many thanks in advance for helping me solving that issue.

I think about that case of something wrong with the `error` variable. I just removed it out of `ng-if="!isLoading && !error"` line. The problem is still there :( — thelonglqd, Nov 03 '16 at 17:31
I am quite not familiar with some tool like plunker/jsfidle, I think it is quite difficult to reproduce my case in those tool. But I will try. With a first look on my code, did you saw some problem? — thelonglqd, Nov 04 '16 at 04:18

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

I think this answer might answer your question that explains how ng-if works:

https://stackoverflow.com/a/19177773/5018962

In short:

The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

edited May 23 '17 at 12:19

Community

1
1

answered Nov 03 '16 at 17:26

eddyP23

6,420
7
49
87

Is ng-if not evaluated or I do not understand about ng-view clearly

1 Answers1