Search code examples
angularjsangular-ng-if

angularjs ng-view inside ng-if


using angular 1.2.10 with ngRoute, jquery 1.10.2 I have the following code in my index.html:

<body ng-controller="MainCtrl">

    <div ng-include src="'partials/login/login.html'"></div>

    <div ng-if="isAuthenticated()">
        <div ng-view/>
    </div>
    <!--javascript files-->
</body>

The initial login page(not configured as a route), downloads all the needed javascript files, but after I login, and ng-if evaluates to true, I notice a bunch of XHRs fired off by jquery for all the javascript files in the browser console:

XHR finished loading: "http://myurl/jquery-1.10.2.min.js?_=1392752363272"
XHR finished loading: "http://myurl/angular.min.js?_=1392752363273"
XHR finished loading: "http://myurl/app.js?_=1392752363274"
...and so on

console reports that these XHRs are being executed from jquery.1.10.2:8706

Based on the documentation it appears that when ng-if evaluates to true the element is created and compiled at that time. I imagine this has something to with ng-view and ngRoute and how these are wired together but I wasn't able to glean from the documentation why this particular behavior is occurring. If anyone could lend some insight into this behavior and/or if there is something fundamentally wrong with the approach I was trying to take it would be much appreciated.

Note:This behavior does not occur if I use replace ng-if with ng-show.


Solution

  • Like you said, ng-if does not render its contents if it evaluates to false.

    You're better off creating a separate route for your login page which will redirect you once you've been authenticated.