ionic/angular $state.go gives blank screen on change - angularjs

Question

I'm trying to implement a facebook login for my ionic app based on this tutorial Coenraets fb tutorial, 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>
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??? Thanks

Answer 1

Make sure that in your templates/tabs.html is a named <ion-nav-view>, because in your state 'tab.login' you tell UI router to look for a view placeholder with the name 'tab-login'. So you need to define this in your template:
<ion-nav-view name="tab-login">
Or you change your state definition to use an empty view name, so it references your unnamed <ion-nav-view> in the parents state 'tab':
.state('tab.login', {
url: '/login',
views: {
'': {
templateUrl: 'templates/tab-login.html',
controller: 'AppCtrl'
}
}
})
In your linked example there is only one named view vor all states, see https://github.com/ccoenraets/sociogram-angular-ionic/blob/master/www/templates/menu.html#L7
Have a look at multiple nested views in UI router here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views