it-swarm.com.de

Übergabe von Parametern mit ui-sref im ui-router an den Controller

Ich muss zwei Parameter an den Status übergeben und empfangen, zu dem ich mithilfe von ui-sref von ui-router übertragen möchte.

Verwenden Sie den folgenden Link, um den Status mit den Parametern home und foo auf bar zu ändern:

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

Empfangen von foo und bar Werten in einer Steuerung:

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

Ich erhalte undefined für $stateParam im Controller.

Könnte mir jemand helfen, zu verstehen, wie ich das hinbekomme?

Bearbeiten:

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

    },

    '[email protected]': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    '[email protected]': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});
360
skip

Ich habe ein Beispiel erstellt, um zu zeigen, wie es geht. Die aktualisierte state-Definition wäre:

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

        },
        ...
      }
_

Und das wäre der Controller:

_.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; 
})
_

Was wir sehen können, ist, dass die URL des State Homes jetzt wie folgt definiert ist:

_url: '/:foo?bar',
_

das bedeutet, dass die Parameter in der URL als erwartet werden

_/fooVal?bar=barValue
_

Diese beiden Links übergeben Argumente korrekt an den Controller:

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

Außerdem verbraucht der Controller _$stateParams_ anstelle von _$stateParam_.

Link zum Dokument:

Sie können es überprüfen hier

_params : {}_

Es gibt auch neue , detailliertere Einstellungen params : {}. Wie wir bereits gesehen haben, können wir Parameter als Teil von url deklarieren. Aber mit der Konfiguration _params : {}_ können wir diese Definition erweitern oder sogar Parameter einführen, die nicht Teil der URL sind:

_.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',
      },
    ...
_

Die für Parameter verfügbaren Einstellungen sind in der Dokumentation des $ stateProvider beschrieben

Unten ist nur ein Auszug

  • value - {object | function =} : Gibt den Standardwert für diesen Parameter an. Dies setzt diesen Parameter implizit als optional ...
  • array - {boolean =}: (default: false) Wenn true, wird der Parameterwert als Array von Werten behandelt.
  • squash - {bool | string =}: squash konfiguriert, wie ein Standardparameterwert in der URL dargestellt wird, wenn der aktuelle Parameterwert dem Standardwert entspricht Wert.

Wir können diese Parameter so nennen:

_// 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]})">
_

Überprüfen Sie es in Aktion hier

527
Radim Köhler

Die Parameter müssen nicht unbedingt in der URL enthalten sein.

Zum Beispiel mit:

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

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

Sie können Parameter an den Status senden, indem Sie entweder:

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

Wenn Sie die Seite einmal im Status home neu laden, verlieren Sie natürlich die Statusparameter, da sie nirgendwo gespeichert werden.

Eine vollständige Beschreibung dieses Verhaltens finden Sie hier in der Zeile params im Abschnitt state(name, stateConfig).

107
Paul Mougel

Sie haben einfach $stateParam falsch geschrieben, es sollte $stateParams sein (mit einem s). Deshalb wirst du undefiniert;)

28
felixfbecker