2016-07-27 3 views
0

Szenario:

1) Wir in Zustand A
2) Benutzer klickt auf einen Link (Ziel ist Zustand B)
3) $ stateChangeStart
4) Abhängigkeiten von Zustand B gelöst bekommen, wirft man einen Fehler
5) $ stateChangeError
6) url noch von Staat A

Gewünschtes Verhalten:

  • Ich mag, das einen modalen Dialog öffnen, um die Fehlermeldung
  • Die URL sollte die URL des Zustand B sein (so kann der Benutzer uns erfrischen den Link oder drücken Sie sendet es erneut versuchen)
  • Idealerweise der Aussicht von Zustand A ist immer noch im Hintergrund des modalen
  • Zurück in Browser-Verlauf sollte uns zurück in den Zustand A (das Modal kann auf den Popstate-Ereignis hören und schließen sich selbst)
  • Schließen der modalen sollte uns auch zurück A angeben (also die URL erneut ändern)

Im Allgemeinen die URL zu ändern, ohne die Ansicht Nachladen ich folgendes tun würde:

// in .config() block 
$urlRouterProvider.deferIntercept(); 

// somewhere else 
var preventNextSuccess = false; 
var unbindError = $rootScope.$on('$stateChangeError', function() { 
    preventNextSuccess = true; 
    $location.path($state.href(toState, toParams)); 
    unbindError(); 
}); 

$rootScope.$on('$locationChangeSuccess', function $event) { 
    if (preventNextSuccess) { 
     $event.preventDefault(); 
     preventNextSuccess = false; 
    } else { 
     $urlRouter.sync(); 
    } 
}); 

$urlRouter.listen(); 

Aber in diesem Fall die $ locationChangeSuccess Ereignis zu verhindern hilft nicht, weil der Fehler nach $ locationStateStart und $ stateChangeStart erscheint und vor $ locationChangeSuccess und $ stateChangeSuccess.

Also mit dieser Lösung bekomme ich eine Endlosschleife. Das Verhindern des Startereignisses hilft auch nicht, weil die URL in diesem Fall nicht festgelegt wird.

Hat jemand eine Idee, wie man das erreicht? Vielen Dank im Voraus :)

Antwort

1

fand ich eine Art und Weise, die in unserem Fall funktioniert:

$rootScope.$on('$stateChangeError', function ($event, toState, toParams, fromState, fromParams, response) { 
    ErrorModalService.openErrorModal({error: error}); 
    var failedStateUrl = $state.href(toState, toParams); 
    var fromStateUrl = $state.href(fromState, fromParams); 

    if (fromStateUrl !== null && fromStateUrl !== failedStateUrl) { 
      var unbindLocationChange = $rootScope.$on('$locationChangeStart', function ($event) { 
       $event.preventDefault(); 
       unbindLocationChange(); 
      }); 
      // After $stateChangeError, the url gets set back to the url of the previous state. 
      // We want to keep the failedUrl (without reloading that state though) 
      $timeout(function() { 
      history.pushState(null, '', failedStateUrl); 
      }); 
    } 
}); 
Verwandte Themen