Jak przekazać parametry za pomocą UI-sref w Ui-routerze do kontrolera

Muszę przekazać i otrzymać dwa parametry do stanu, do którego chcę przejść używając ui-sref ui-routera.

Coś takiego jak użycie poniższego linku do przejścia stanu do home z parametrami foo i bar: 

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>

Otrzymywanie wartości foo i bar w kontrolerze: 

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});

Dostaję undefined za $stateParam w kontrolerze.

[11]} Czy ktoś mógłby mi pomóc zrozumieć jak to zrobić?

Edit: 

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

    'A@home': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    'B@home': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});
Author: Radim Köhler, 2014-09-03
Source

3 answers

Stworzyłem przykład , aby pokazać, jak to zrobić. Zaktualizowana definicja {[7] } będzie brzmiała: 

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'

        },
        ...
      }

A to będzie kontroler: 

.controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
    $scope.state = $state.current
    $scope.params = $stateParams; 
})

Widzimy, że dom stanu ma teraz adres URL zdefiniowany jako: 

url: '/:foo?bar',

Co oznacza, że paramy w url są oczekiwane jako 

/fooVal?bar=barValue

Te dwa linki będą poprawnie przekazywać argumenty do kontrolera: 

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">

Ponadto kontroler zużywa $stateParams zamiast $stateParam.

Link do doc:

Możesz to sprawdzić tutaj

params : {}

Istnieje również nowe , bardziej ziarniste ustawienie params : {}. Jak już widzieliśmy, możemy zadeklarować parametry jako część url. Ale z konfiguracją params : {} - możemy rozszerzyć tę definicję lub nawet wprowadzić paramtery, które nie są częścią adresu url: 

.state('other', {
    url: '/other/:foo?bar',
    params: { 
        // here we define default value for foo
        // we also set squash to false, to force injecting
        // even the default value into url
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        // this parameter is now array
        // we can pass more items, and expect them as []
        bar : { 
          array : true,
        },
        // this param is not part of url
        // it could be passed with $state.go or ui-sref 
        hiddenParam: 'YES',
      },
    ...

Ustawienia dostępne dla param są opisane w dokumentacji z $stateProvider

Poniżej jest tylko wyciąg

  • value - {object / function=} : określa domyślną wartość dla tego parametru. Domyślnie ustawia ten parametr jako opcjonalny...
  • array - {boolean=}: (domyślnie: false) jeśli true, wartość param będzie traktowana jako tablica wartości.
  • squash - {bool|string=}: squash konfiguruje sposób reprezentacji domyślnej wartości parametru w adresie URL, gdy bieżąca wartość parametru jest taka sama jak wartość domyślna.

Możemy nazwać te paramy w ten sposób: 

// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&amp;bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

Sprawdź w akcji tutaj

 509
Author: Radim Köhler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-11 18:56:18

Niekoniecznie musisz mieć parametry wewnątrz adresu URL.

Na przykład z: 

$stateProvider
.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },
  },
  params: {
    foo: null,
    bar: null
  }
})

Będziesz mógł wysłać parametry do stanu, używając: 

$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>

Oczywiście, jeśli przeładujesz stronę raz na stanie home, stracisz parametry stanu, ponieważ nigdzie nie są przechowywane.

Pełny opis tego zachowania jest udokumentowany tutaj, w wierszu params w sekcji state(name, stateConfig).

 102
Author: Paul Mougel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-22 11:42:47

Po prostu źle napisałeś $stateParam, powinno być $stateParams (przez s). Dlatego dostajesz undefined;)

 26
Author: felixfbecker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-10 13:32:46