ionic/angular $ state.go gibt einen leeren Bildschirm für Login-Seite

Question

Ich versuche, eine Login/Auth-Seite mit Firebase für meine ionische App zu implementieren, aber ich stoße auf einige Probleme.

Ich verwende Tabs im Hauptteil meiner App, aber wenn ich versuche, einen Benutzer auf die Login-Seite umzuleiten (meine Tabbed-Ansicht auszublenden), wird die Login-Seite leer angezeigt, obwohl der Status und die URL korrekt sind. Hier ist, wo ich meine Zustände und Tabs erklären:

.config(function($stateProvider, $urlRouterProvider) { 

    // setup an abstract state for the auth section 
    .state('auth', { 
    url: '/auth', 
    abstract: true, 
    }) 

    .state('auth.login', { 
    url: '/login', 
    views: { 
     'main-view1': { 
     templateUrl: 'templates/auth/login.html', 
     controller: 'LogInCtrl' 
     } 
    }, 
    data: { 
     authenticate: false 
    } 
    }) 

    .state('auth.signup', { 
    url: '/signup', 
    views: { 
     'main-view2': { 
     templateUrl: 'templates/auth/signup.html', 
     controller: 'SignUpCtrl' 
     } 
    }, 
    data: { 
     authenticate: false 
    } 
    }) 

    // setup an abstract state for the tabs directive 
    .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html' 
    }) 

    // Each tab has its own nav history stack: 

    .state('tab.home', { 
    url: '/home', 
    views: { 
     'tab-home': { 
     templateUrl: 'templates/tab-home.html', 
     controller: 'homeCtrl' 
     } 
    }, 
    data: { 
     authenticate: true 
    } 
    }); 
}); 

Meine Umleitung erfolgt hier im Lauffunktion:

.run(function($ionicPlatform, $rootScope, $state, AuthService) { 
    $ionicPlatform.ready(function(){ 
    AuthService.userIsLoggedIn().then(function(response) 
    { 
     if(response === true) 
     { 
     $state.go('tab.home'); 
     } 
     else 
     { 
     $state.go('auth.login'); 
     } 
    }); 

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if (window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
    } 
    }); 

    // UI Router Authentication Check 
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){ 
    if (toState.data.authenticate) 
    { 
     AuthService.userIsLoggedIn().then(function(response) 
     { 
     if(response === false) 
     { 
      event.preventDefault(); 
      $state.go('auth.login'); 
     } 
     }); 
    } 
    }); 
}) 

Schließlich meine templates/Auth/login.html Datei sieht wie folgt aus:

<ion-view> 
    <ion-header-bar class="bar-stable"> 
    <h1 class="title">Log In</h1> 
    </ion-header-bar> 
    <ion-content class="padding"> 
    <button class="button button-block button-positive" ng-click="facebookLogin()">Login with Facebook</button> 
    <div class="row"> 
     <div class="col col-center"> 
     <h4 class="text-center">OR</h4> 
     </div> 
    </div> 
    <form name="login_form" class="form-container" novalidate> 
     <div class="list list-inset"> 
     <label class="item item-input"> 
      <input type="email" placeholder="Email" ng-model="user.email" required> 
     </label> 
     <label class="item item-input"> 
      <input type="password" placeholder="Password" ng-model="user.password" required> 
     </label> 
     </div> 
     <button class="button button-block button-balanced" ng-click="login(user)" ng-disabled="login_form.$invalid">Login</button> 
    </form> 
    <button class="button button-block button-clear button-positive button-small" ui-sref="auth.signup"> 
     Sign Up 
    </button> 
    <div ng-show="errors"> 
     <p class="message error" ng-repeat="error in errors"><b>[{{error.code}}]</b> {{error.msg}}</p> 
    </div> 
    </ion-content> 
</ion-view> 

Irgendwelche Ideen, wo ich bei der Implementierung der Anmeldeseite falsch liege?

Answer 1

Ich würde nicht mit einer Herarchie Ansatz für die Anmeldung/Anmeldung Abschnitt gehen. Sie sollten einfache Zustände ohne Auth erstellen. (Es ist nicht obligatorisch). Wenn Sie sich entschließen, es zu entfernen, müssen Sie die ui-view-Verweise "main-view1" und "main-view2" entfernen, da diese angeben, wo die Ansicht geladen werden soll und innerhalb der Vorlage des übergeordneten Elements deklariert werden muss .

Und wenn Sie immer noch eine Autor Elternansicht behalten wollen, was Sie brauchen, ist eine Vorlage für den abstrakten Zustand zu erstellen und ein Div mit dem UI-View-Attribut zu deklarieren, geben Sie ihm einen Namen wie "Hauptansicht" und Ändern Sie dann sowohl Ihren auth.login als auch Ihren auth.signup ui-view Verweis auf "Hauptansicht".