2016-06-09 14 views
0

Ich habe drei verschiedene Parent-Staaten, die jeweils eine Reihe von URL-Parametern haben. Sie einige der gleichen params teilen, aber nicht immer, zum Beispiel:UI-Router: validieren und ändern URL-Parameter während der Statusänderung

$stateProvider 
    .state('state1',{ 
     url : 'state1', 
     params : { 
     start : {value: null, squash : true, dynamic : true}, 
     end : {value: null, squash : true, dynamic : true}, 
     tz : {value: 'Eastern', squash: true, dynamic : true} 
     } 
    } 
    .state('state2',{ 
     url : 'state2', 
     params : { 
     end : {value: null, squash : true, dynamic : true} 
     } 
    } 
    .state('state3',{ 
     url : 'state3', 
     params : { 
     start : {value: null, squash : true, dynamic : true}, 
     end : {value: null, squash : true, dynamic : true}, 
     tz : {value: 'Eastern', squash: true, dynamic : true}, 
     period : {value: 'Quarter', squash: true, dynamic : true} 
     } 
    } 

Ich versuche, die Fähigkeit zum Einrichten einiger Validierung zu tun, wenn Schaltzustände.

Zum Beispiel, sagen wir mal der Benutzer in state1 mit einer URL von state1?start=20160101&end=20160131 ist und klickt auf einen Link zu state2, aber in state2, gibt es nur ein Datum (end), und es dauert nur das Jahr (z. B. 2016) , also muss ich state2 laden, aber den end Parameter ändern, um einen anderen Wert zu haben.

Ich habe versucht, die folgenden ein: mit diesem

angular.module('myApp',[ui.router,ui.router.default]) 
    .run(['$transitions','$state',runFunction]); 

    function runFunction($transitions,$state){ 
     var match = { 
      to: 'state2', 
      from: 'state1' 
     }; 

     $transitions.onBefore(match,function($transitions$,$state){ 
      var fromParams = $transition$.params('from'); 
      var toParams = $transition$.params('to'); 
      if(fromParams.end){ 
       toParams.end = fromParams.end.substr(0,4); 
      }else{ 
       toParams.end = '2016'; 
      } 
      return $state.transitionTo($transition$.to().name, toParams); 
     } 
    } 

Mein Problem ist, dass ich in eine Endlosschleife laufen.

Ich möchte die Möglichkeit, eine beliebige Anzahl von Paramvalidierungen durchzuführen und param Änderungen vornehmen, wenn erforderlich sein. Gehe ich hier hin, das ist der richtige Weg?

Mit Winkel ui-Router 1.0.0-alpha.3

Dank !!

+0

Verwendung params als null, dann können Sie Satz params in $ state.go $ state.go ('state2', dinamicly { param1: value1}) –

+0

Sie können nach der Validierung einen zusätzlichen Parameter 'valided' hinzufügen und' $ state.transitionTo' nicht aufrufen, wenn dieser bereits vorhanden ist. –

+0

@ZeRubeus das funktioniert ok außer für die 'onBefore' erkennt eine Zustandsänderung, die sich in eine Endlosschleife verwandelt – tkwargs

Antwort

1

Ich konnte diese mit einfacher Logik lösen nicht Endlosschleife ermöglichen:

angular.module('myApp',[ui.router,ui.router.default]) 
.run(['$transitions','$state',runFunction]); 

// variables outside the run function 
var params = {}; 
var transition_count = 0; 

function runFunction($transitions,$state){ 
    var match = { 
     to: 'state2', 
     from: 'state1' 
    }; 

    $transitions.onBefore(match,function($transitions$,$state,$q){ 
     var deferred = $q.defer(); 
     var target = true; 
     var origParams = $transition$.params('from'); 
     var first_loop = transition_count === 0 ? true: false; 
     if(first_loop){ 
      params = $transition$.params('from'); 
     } 

     if(origParams .end){ 
      params .end = origParams .end.substr(0,4); 
      target = false; 
     }else{ 
      params .end = '2016'; 
      target = false; 
     } 

     if(!target){ 
      $state.go($transition$.to().name, params); 
      transtion_count++; 
     }else{ 
      params = {}; // reset the params to empty object 
      transition_count = 0; // reset transition_count 
     } 
     deferred.resolve(target); 
    } 
    return deferred.promise; 
} 
Verwandte Themen