AngularJS UI-Router, der Daten zwischen Zuständen ohne URL weiterleitet

146

Ich stehe vor dem Problem, Daten zwischen zwei Zuständen zu übertragen, ohne die Daten in der URL offenzulegen. Es ist, als ob der Benutzer nicht direkt auf diesem Zustand landen kann.

Beispielsweise. Ich habe zwei Zustände "A" und "B". Ich mache einen Serveraufruf im Status "A" und leite die Antwort des Anrufs an den Status "B" weiter. Die Antwort des Serveraufrufs ist eine String-Nachricht, die ziemlich lang ist, daher kann ich das in der URL nicht offenlegen.

Gibt es also eine Möglichkeit im eckigen UI-Router, Daten zwischen Status zu übertragen, ohne URL-Parameter zu verwenden?

Vijay Tyagi
quelle

Antworten:

185

Wir können verwenden params, neues Merkmal des UI-Router:

API-Referenz / ui.router.state / $ stateProvider

paramsEine Karte, die optional in der URL deklarierte Parameter konfiguriert oder zusätzliche Nicht-URL-Parameter definiert. Fügen Sie für jeden zu konfigurierenden Parameter ein Konfigurationsobjekt hinzu, das dem Namen des Parameters zugeordnet ist.

Siehe Teil: " ... oder definiert zusätzliche Nicht-URL-Parameter ... "

Der Staatsdefekt wäre also:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

Einige Beispiele aus dem oben genannten Dokument :

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - Arbeitsbeispiel: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Hier ist ein Beispiel für eine Zustandsdefinition:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

Dies könnte ein Aufruf mit ui-sref sein:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

Überprüfen Sie das Beispiel hier

Radim Köhler
quelle
Wie vorgeschlagen, habe ich versucht, Parameter in einem verschachtelten Status zu verwenden (Beispiel - "/ user / profile / contact" ", es gab mir einen Fehler. Muss ich die" Parameter "auch für den übergeordneten Status definieren?
vijay tyagi
Es scheint nicht notwendig zu sein, dass Eltern die Parameter definiert haben, danke für die detaillierte Antwort.
Vijay Tyagi
Großartig, wenn das irgendwie geholfen hat;) genieße den mächtigen UI-Router
Radim Köhler
1
Leider funktioniert dies nicht mit UI-Router 0.2.10 und das ist, was ich benutze, bekam diesen Fehler beim Ändern der Version auf 0.2.10 - Fehler: Ungültige Parameter im Zustand 'Home'
Vijay Tyagi
1
@ Vijaytyagi, sollten Sie aktualisieren. Es gibt einfach keinen Grund, die alte Version weiter auszuführen. Und soweit ich mich erinnere, sollte der Umzug reibungslos sein ...
Radim Köhler
38

Das params-Objekt ist in $ stateParams enthalten, wird jedoch nicht Teil der URL sein.

1) In der Routenkonfiguration:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) In der Steuerung:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A) Ändern des Status von einem Controller

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) Ändern des Status in HTML

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

Beispiel Plunker

WiredIn
quelle
1
Danke, perfekt. Beachten Sie auch, dass Sie nur $ state injizieren müssen, wenn Sie sowohl $ state als auch $ stateParams möchten. Das stateParams-Objekt ist eine Eigenschaft von $ state: $ state.params.
Michael K
1
Es muss gesagt werden, dass Schritt 1 (Bereitstellung von Standardwerten) erforderlich ist, damit der Rest von ihnen funktioniert ;-)
Xtreme Biker
2
Vielen Dank für das kurze Beispiel. Funktioniert bei mir! (UI-Router v 1.0.3)
Roboprog