$state.go() changing URL but not correctly loading template

The issue I am having is that I am trying to have a user login to my application and then once they have done so, redirect them to our home page. Up until recently this worked as expected, but now what happens is that the url will change but the template on the new page will not load correctly, showing only a blank screen.

If I use the chrome inspector (with Ionic serve) it shows that the elements have been loaded in the DOM and there doesn’t seem to be any CSS hiding it. Similarly, if I refresh the page (which goes directly to the home page as the user has already logged in) it works correctly.

How I am changing state
$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true });$state.go('myapp.newsfeed)`

My states
$stateProvider

.state('login', {
  url: "/login",
  templateUrl: "templates/login.html",
  controller: "logincontroller"
})

.state('myapp', {
  url: "/myapp",
  abstract: true,
  templateUrl: "templates/menu.html"
})

.state('myapp.newsfeed', {
  url: '/newsfeed',
  views: {
    'menuContent' :{
      templateUrl: "templates/newsfeed.html",
      controller: "globalfeedctrl"
    }
  }
})

Code in globalfeedcontrol that I am sure is being called
$scope.$on('$ionicView.enter', function() {
console.log("We are entering the view");

		if($rootScope.just_logged_in){
			$window.location.reload(true);

			$rootScope.just_logged_in = false;
			$scope.refreshContent();
			$rootScope.$broadcast('store-changed');
			$rootScope.$broadcast('reload-challenges');
			$rootScope.$broadcast('load-hub');
			$rootScope.$broadcast('reload-messages');
			$rootScope.$broadcast('reload-notifications');

			$rootScope.just_logged_in = false;
		}

		if(!initial_load){
			$scope.refreshContent();
		}
		initial_load = false;
		updateEngagement();
	})

I am sure that the controller code is being called both because the statement is logged but also because the network inspector shows that the necessary items are being loaded.

Also note that $window.location.reload(true) is a dirty little hack to get it to work.

Any help that could be provided would be greatly appreciated.

1 Like

Should be

$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true });
$state.go('myapp.newsfeed')

Sorry that was a typo :frowning:
Is $state.go('myapp.newsfeed') in my file.

What does the login code look like if you don’t mind

$scope.login = function(){

	if(!$scope.cred.username || !$scope.cred.password){
		showAlert("Username/Password cannot be blank");
		return;
	}

	Auth.login($scope.cred).then(function(user){

    if(!Auth.isAuthenticated()){
      showAlert("Your credentials were Incorrect");
      return;
    }

    console.log(user);

    window.localStorage.setItem("email", user.email);
    window.localStorage.setItem("token", user.authentication_token);
    window.localStorage.setItem("name", user.fullname);
    window.localStorage.setItem("userid", user.id);
    window.localStorage.setItem("created", user.created_at);
    window.localStorage.setItem("user_image", user.profile_image);
    window.localStorage.setItem("firstname", user.firstname);
    window.localStorage.setItem("lastname", user.lastname)

    $http.defaults.headers.common['X-User-Token'] = user.authentication_token;
    $http.defaults.headers.common['X-User-Email'] = user.email

  	$ionicHistory.nextViewOptions({
        disableAnimate: true,
        disableBack: true
    });


    $rootScope.just_logged_in = true;
    $state.go('myapp.newsfeed');
}, function(error, $rootScope){

	})
}

Sorry, indentation might be a bit funky.

Everything looks fine is there any link to the source ?

Hello anthonyi
Thank you for your great post.
I have same issue. but … When i try this, it is works bad on my own.

This is my LoginCtrl controller…

app.controller('LoginCtrl', function ($scope, $stateParams, $ionicHistory, $timeout, $state, ionicMaterialInk) {

$scope.doLogin = function() {
console.log(‘Doing login’, $scope.loginData);

// code if using a login system
$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true });
$state.go("app.home");

};
});

when i click login button. it is redirect to home … but UI (CSS) is all broken…
When i refresh page, it is looks good.

What i am wrong? Can you help me?
Thanks

1 Like
   $scope.login = function(event){
event.preventDefault();
$state.go('app.home');
}

I was having a similar problem and that’s what i did

1 Like