$state.go gives blank screen on change

ionic-v1
1

I’m trying to implement a facebook login for my ionic app based on this tutorial http://coenraets.org/blog/2014/04/sociogram-angularjs-ionic-facebook/ , but I am coming across some problems.

I use tabs in my app, but when I try and redirect a user to the login page (tab) if they are not logged in, the login page shows as being blank (the navigation bar is still at the top though). If I refresh the page though, the login page then shows correctly. I know it is at least trying to redirect the page because I can’t go to other tabs, just always this blank login tab. Here is where I declare my tabs:

   .config(function($stateProvider, $urlRouterProvider) {
 $stateProvider
 // setup an abstract state for the tabs directive
 .state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.login', {
 url: '/login',
views: {
  'tab-login': {
    templateUrl: 'templates/tab-login.html',
    controller: 'AppCtrl'
  }
}
})

  //example of another state 
 .state('tab.map', {
url: '/map',
views: {
  'tab-map': {
    templateUrl: 'templates/tab-map.html',
    controller: 'MapController'
  }
}
})

Here is what my Login Tab HTML looks like:

<ion-view title="Login" name="tab-login" hide-back-button="true" style="background: #1b5a83" hide-nav-bar="true">
<ion-content has-header="true" padding="true" ng-controller="AppCtrl">
    <div class="list list-inset"  style="background: #1b5a83">
        <div class="item item-image" style="border:none;margin-top:50px;">
            <img src="img/sociogram.jpg"/>
        </div>
        <button class="button button-block button-light" ng-click="facebookLogin()">
            <i class="icon ion-social-facebook"></i>
            &nbsp;Login with Facebook
        </button>
    </div>
</ion-content>

And here is where my redirection takes place inside the .run function:

.run(function($rootScope, $state, $ionicPlatform, $window, OpenFB) {
 OpenFB.init(fbappid, 'http://localhost:8100/oauthcallback.html', window.sessionStorage);

  $ionicPlatform.ready(function() {
  $rootScope.$on('$stateChangeStart', function(event, toState) {
        if (toState.name !== "tab.login" && toState.name !== "tab.logout" && !$window.sessionStorage['fbtoken']) {
            $state.go('tab.login');
            event.preventDefault();
        }
    });

    $rootScope.$on('OAuthException', function() {
        $state.go('tab.login');
    });
})

Any ideas where I am going wrong??? Any help would be greatly appreciated! Thank You

2

Hi, I’m having the exact same problem. Where you able to figure out what you did wrong?