ionic / angular $ state.go給出登錄頁面的空白屏幕

Question

我正在嘗試使用ionic應用程序的Firebase來實現登錄/身份驗證頁面，但是遇到了一些問題。

我在應用程序的主要部分中使用了選項卡，但是當我嘗試將用戶重定向到登錄頁面（隱藏我的選項卡式視圖）時，盡管狀態和url正確定向，登錄頁面仍顯示為空白。 這是我聲明狀態和標簽的地方：

.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
    }
    });
});

我的重定向在run函數中進行：

.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');
        }
      });
    }
  });
})

最后，我的templates / auth / login.html文件如下所示：

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

實施登錄頁面時，我哪里出錯了？

Answer 1

對於登錄/注冊部分，我不會采用分層方法。 您應該創建沒有身份驗證的簡單狀態。 （似乎沒有強制性）。 如果決定刪除它，則需要刪除ui-view引用“ main-view1”和“ main-view2”，因為它們指示了視圖的加載位置，並且需要在父級模板中聲明。

而且，如果您仍然想保留作者的父視圖，則需要為抽象狀態創建一個模板，並使用ui-view屬性聲明一個div，並為其命名，例如“ main-view”，然后同時更改兩者auth.login和auth.signup ui視圖引用到“主視圖”。