Angular ui-view wird nicht richtig geladen

Question

Ich arbeite an einer Anwendung basierend auf Angular 1 und UI-Router. Unten ist mein Code der Indexseite

<div ng-if="!authenticated"> 
     <div ui-view></div> 
    </div> 

    <div ng-if="authenticated"> 
     <!-- header start --> 
     <div header></div> 
     <!-- header end --> 
     <div class="wrapper" id="wrapper"> 
      <!-- sidebar start --> 
      <div sidebar></div> 
      <!-- sidebar end --> 
      <div class="content"> 
       <div class="container-fluid"> 
        <div ui-view></div> 
       </div> 
      </div> 
     </div> 
     <!-- footer start --> 
     <div footer></div> 
     <!-- footer end --> 
    </div> 

Router Congif:

$stateProvider 
    .state(CONSTANTS.STATE.LOGIN, { 

     url: CONSTANTS.PAGE_URL.LOGIN, 
     templateUrl: "./resources/login/login.tpl.html", 
     controller: 'LoginCtrl', 
     data: { pageTitle: 'Title for Login'}, 
     permit : { 
      loginRequired: false, 
      resources : [ PERMISSIONS.RESOURCES.ALL ] 
     } 
    }).state('abc', { 
      abstract: true, 
      url: CONSTANTS.PAGE_URL.BASE, 
      controller: 'AbcCtrl', 
      templateUrl: "./resources/abc/base/abc.tpl.html" 
    }).state('abc.dashboard', { 

     url: CONSTANTS.PAGE_URL.DASHBOARD, 
     templateUrl: "./resources/abc/dashboard/dashboard.tpl.html", 
     data: { pageTitle: 'Title for Dashboard' }, 
     controller: 'DashboardCtrl', 
     permit : { 
      loginRequired : true, 
      resources : [ PERMISSIONS.RESOURCES.ALL ] 
     } 
    })....... 

Problem: Nach einem Login zeigt die neue ui-Ansicht die Ansicht von nicht authentifizierten Seite für einen kurzen Zeitraum von Zeit und lädt dann den authentifizierten Inhalt. Wie kann ich dieses Problem vermeiden?

Answer 1

versuchen diese, damit dies geschieht wird verhindert, dass

<div ng-if="!authenticated"> 
     <div ui-view></div> 
</div> 

Zu diesem

<div ng-if="!authenticated" ng-cloak> 
     <div ui-view></div> 
</div> 

ngCloak zu ändern.