CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-routerfirebase
user4889724
user4889724

Reputation: 131

ionic $state.go redirect does not load ui correctly until click

I am using ionic with firebase, and am trying to redirect upon login to the home page. The $state.go redirect does work, however I have a hidden tab called 'Profile', that I do not show until the user is authenticated. This tab remains hidden on the $state.go redirect, and doesn't show until I click on the 'Home' tab again. How do you load the load the ui on a redirect?

HTML:

tabs HTML:

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-controller="LoginCtrl">

  <!-- Login Tab -->
  <ion-tab title="Login" icon-off="ion-locked" icon-on="ion-locked" href="#/tab/login">
    <ion-nav-view name="tab-login"></ion-nav-view>
  </ion-tab>

  <!-- Dashboard Tab -->
  <ion-tab title="New Post" icon-off="ion-compose" icon-on="ion-compose" href="#/tab/new">
    <ion-nav-view name="tab-new"></ion-nav-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>
  <!-- Account Tab -->
  <ion-tab class="{{hiddenProfileTab()}}" title="Profile" icon-off="ion-person" icon-on="ion-person" href="#/tab/profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>

  </ion-tab>



</ion-tabs>

Login Controller

.controller('LoginCtrl', ['$scope', '$rootScope',  '$state', '$location', function($scope, $rootScope, $state, $location) {

   $scope.hiddenProfileTab = function(){
  // return "ng-hide";
  if ($rootScope.currentUser){
    return "ng-show";
  } else {
    return "ng-hide";
  }
 }

//DO SOME THINGS
      // $location.path('tab.home')
      // $state.go('tab.home')
      // $state.go('tab.home'), {}, { reload: true }
      $state.go('tab.home',{},{location:'replace'});
    };





 }])

To reiterate the problem, the Profile tab remains hidden on the $state.go redirect to the 'home' page, until the 'home' page tab is clicked.

Any ideas how to load the UI on the redirect?

Upvotes: 2

Views: 2161

Answers (3)

Chris Matthews
Chris Matthews

Reputation: 81

Not sure if it is directly attributable to this specific problem, but when I encountered a similar issue with elements not displaying until the user started interacting with the UI, I found that the issue was due to having multiple elements with the same "id" attribute value.

In my case it was related to a loader animation icon that I was using on multiple views. I always had the loader id set to the same thing ("loading-progress"). When showing and hiding my loader I was experiencing weird behaviors until I made sure to name each loader uniquely.

Ultimately, I think my problem was due to not treating angular as being a single page app but coding as though it were a full site with unique pages and views. It's easy to just concentrate on the view at hand and forget that it's actually sitting in a big set of nested views and html snippets.

Edit: Also, I should have mentioned, another common issue where content does not appear (especially dynamically loaded content) often relates to window/div resizing. In particular, if you begin with a hidden div that you then populate with data through an api call, you often need to conclude it with a call to:

$ionicScrollDelegate.resize()

to force the size of the div to be recalculated. Without this, your data can be loaded but still not visible because the parent div is still hanging out with a 0px height.

Edit again!:

Also, when working with ng-repeat and similar dynamic angular databinding, to force the ng logic to re-sync the html with the data you can use:

$scope.$apply();

Upvotes: 0

user4889724
user4889724

Reputation: 131

Solved this by setting the cache:false so that the controller is forced to load again.

  .state('tab.home', {
    cache: false,
      url: '/home',
      views: {
        'tab-home': {
          templateUrl: 'templates/tab-home.html',
          controller: 'HomeCtrl'
        }
      }
    })

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Use ng-show instead of using class attribute with {{}} interpolation.

  <ion-tab ng-show="currentUser" title="Profile" icon-off="ion-person" icon-on="ion-person" href="#/tab/profile">
      <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>

Upvotes: 3

Related Questions