Router AngularJS ui przekazuje dane między stanami bez adresu URL


146

Mam problem z przekazywaniem danych między dwoma stanami bez ujawniania danych w adresie URL, tak jakby użytkownik nie mógł tak naprawdę bezpośrednio wylądować w tym stanie.

Na przykład. Mam dwa stany „A” i „B”. Wykonuję wywołanie serwera w stanie „A” i przekazuję odpowiedź na wezwanie do stanu „B”. Odpowiedzią na wywołanie serwera jest wiadomość tekstowa, która jest dość długa, więc nie mogę tego ujawnić w adresie URL.

Czy w routerze kątowym ui jest jakiś sposób przekazywania danych między stanami bez używania parametrów adresu URL?

Odpowiedzi:


185

Możemy użyć params, nową cechę UI-Router:

Dokumentacja API / ui.router.state / $ stateProvider

paramsMapa, która opcjonalnie konfiguruje parametry zadeklarowane w adresie URL lub definiuje dodatkowe parametry niezwiązane z adresem URL. Dla każdego konfigurowanego parametru dodaj obiekt konfiguracyjny z kluczem do nazwy parametru.

Zobacz część: „ ... lub definiuje dodatkowe parametry inne niż URL ...

Zatem stan def byłby następujący:

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

Kilka przykładów z powyższego dokumentu :

// 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 - działający przykład: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Oto przykład definicji stanu:

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

To może być połączenie za pomocą ui-sref:

<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>

Sprawdź przykład tutaj


Jak zasugerowałem, próbowałem użyć parametrów w stanie zagnieżdżonym (Przykład - „/ user / profile / contact”, spowodowało to pewien błąd. Czy muszę również zdefiniować „parametry” dla stanu nadrzędnego?
vijay tyagi

Wygląda na to, że rodzic nie musi mieć zdefiniowanych parametrów, dzięki za szczegółową odpowiedź.
vijay tyagi

Świetnie, jeśli to i tak pomogło;) ciesz się potężnym routerem UI
Radim Köhler

1
Niestety to nie działa z UI-Router 0.2.10 i to, co używam, mam ten błąd na zmianę do wersji 0.2.10 - Błąd: nieprawidłowy params w stanie „domu”
Vijay tyagi

1
@vijaytyagi, powinieneś dokonać aktualizacji. Po prostu nie ma powodu, aby nadal używać starej wersji. I o ile dobrze pamiętam ruch powinien być płynny ...
Radim Köhler

38

Obiekt params jest zawarty w $ stateParams, ale nie będzie częścią adresu URL.

1) W konfiguracji trasy:

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

2) W kontrolerze:

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

3A) Zmiana stanu od administratora

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

3B) Zmiana stanu w html

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

Przykład Plunker


1
Dzięki, świetnie. Zauważyłem również, że jeśli chcesz zarówno $ state, jak i $ stateParams, wystarczy wstrzyknąć $ state. Obiekt stateParams jest właściwością $ state: $ state.params.
Michael K

1
Trzeba powiedzieć, że krok 1 (podanie wartości domyślnych) jest wymagany, aby pozostałe działały ;-)
Xtreme Biker

2
Dziękuję za zwięzły przykład. Pracuje dla mnie! (UI-Router v 1.0.3)
Roboprog
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.