CODEWITHSUNDEEP
angularjsanimationnavigationionic-frameworkangular-ui-router
niklas
niklas

Reputation: 2991

ionic navigation animation when staying on same state

I have an ionic app that has a detail view for displaying details for certain elements. On each detail view I display buttons to the next and previous elements. On navigation the State stays the same, only the view model instance will change and the new data will be displayed. My state looks like:

.state('main.tabs', {
  url: '/element/:id',
  params: {
    previous: null,
    next: null
  },
  cache: false,
  views: {
    'pageContent': {
      templateUrl: 'element/templates/element.tabs.html',
      controller: 'ElementTabCtrl as tabCtrl',
    }
  },
  resolve: {
    activeElement: function (DataService, $stateParams) {
      return DataService.setActiveElement($stateParams.id);
    }
  }
})

the function that triggers navigation is:

  $scope.tabNav = function (tabSref) {
    $state.go(tabSref, {id:activeElement.id});
  }

Now whenever I click on a button the tabNav() function is called, the screen freezes for some miliseconds, before the new parameters are loaded into the view.

How can I either perform navigation animations or show a loading screen that stays until the activeElement is changed?

Upvotes: 0

Views: 391

Answers (1)

Sha Alibhai
Sha Alibhai

Reputation: 881

Option 1: Reload the view. You can add a third "options" object to the $state.go call with an attribute reload to always reload the current view which will in turn trigger a navigation animation and remove the screen freeze.

$state.go(tabSref, { id: activeElement.id }, { reload: true });

See http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state for more information.

reload (v0.2.5) - {boolean=false|string|object}, If true will force transition even if no state or params have changed. It will reload the resolves and views of the current state and parent states. If reload is a string (or state object), the state object is fetched (by name, or object reference); and \ the transition reloads the resolves and views for that matched state, and all its children states.

Option 2: Display a loading screen. Ionic has an $ionicLoading service that you can utilize to overlay a loading screen whilst the page transitions. According to the ui-router wiki https://github.com/angular-ui/ui-router/wiki, a $stateChangeSuccess event is broadcast once the transition is complete, meaning you can do the following:

$ionicLoading.show({ template: 'Loading...' });

$state.go(tabSref, { id: activeElement.id });

$rootScope.$on('$stateChangeSuccess', _onChangeStateSuccess);

function _onChangeStateSuccess () {
  $ionicLoading.hide();
}

$stateChangeSuccess - fired once the state transition is complete. $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })

You can read more about $ionicLoading here http://ionicframework.com/docs/api/service/$ionicLoading/

Upvotes: 1

Related Questions