CODEWITHSUNDEEP
javascriptangularjscordovaionic-framework
Xelom
Xelom

Reputation: 1625

Preventing navigation in Ionic App

I am trying to prevent navigation and show a popup in a controller. 

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  if(someConditionMet) {
    event.preventDefault();
    showPopup();
  }
}

This is working like a charm anything other than tab navigation. It cannot prevent navigation properly and navigates to a tab then shows popup. Another problem kicks in here because of the scope change popup fails to load properly and raises exception. I only see a blank popup with no way to exit after this.

Edit - Plunker demo http://plnkr.co/edit/r8MxO6tDZfTlHPXrVJlM?p=preview

From side menu press About it prevents normally. Then press settings tab. It is trying to navigate to settings tab then shows the popup. Also settings tab cannot be loaded successfuly.

Upvotes: 2

Views: 445

Answers (1)

beaver
beaver

Reputation: 17657

I edited the "settings" state (name "tabs.about", nested to "tabs"):

.state('tabs.about', {
  url: '/about',
  controller: 'AboutCtrl',
  templateUrl: 'about.html'
});

then I've created a new controller ("mainCtrl") attached to <body> and moved here the $stateChangeStart event handler, so it can listen events without regard to the current state (previously it was in the Home controller):

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    var txt = '$stateChangeStart from: '+fromState.name+" to "+toState.name;
    console.log(txt);
    $rootScope.log = txt;
  })

Here is a plunker updated:

http://plnkr.co/edit/xcTMzPJdTVgVxV5jgpho

Upvotes: 2

Related Questions