vendredi 27 février 2015

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

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>
&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??? Thanks


Aucun commentaire:

Enregistrer un commentaire