So übergeben Sie Parameter mit ui-sref in ui-router an den Controller

Lesezeit: 4 Minuten

Benutzer-Avatar
überspringen

Ich muss zwei Parameter an den Zustand übergeben und empfangen, in den ich wechseln möchte ui-sref von ui-router.

Verwenden Sie zum Beispiel den folgenden Link, um den Status zu ändern home mit foo und bar Parameter:

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

Empfang foo und bar Werte in einem Controller:

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

Ich bekomme undefined zum $stateParam im Steuergerät.

Könnte mir jemand helfen zu verstehen, wie man das hinbekommt?

Bearbeiten:

.state('home', {
  url: "https://stackoverflow.com/",
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

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

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

});

  • Sie müssen sie auch in Ihren Routen einrichten. ex:- url:'.../home/:foo/:bar

    – PSL

    3. September 2014 um 14:51 Uhr


  • @PSL: Könntest du hier nur ein kleines Beispiel geben? Vielen Dank.

    – überspringen

    3. September 2014 um 14:55 Uhr

  • @PSL: Danke PSL, gibt es eine andere Möglichkeit, diese Parameter mit ihren Werten in einem Controller zu haben?

    – überspringen

    3. September 2014 um 15:01 Uhr

  • Tun '/:foo/:bar': { in Ihrer leeren Route oder Sie können sie auch als Abfragezeichenfolge einrichten.

    – PSL

    3. September 2014 um 15:01 Uhr


Benutzer-Avatar
Radim Köhler

Ich habe eine erstellt Beispiel zu zeigen, wie es geht. Aktualisiert 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 das State Home jetzt eine URL hat, die wie folgt definiert ist:

url: '/:foo?bar',

was 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 Anstatt von $stateParam.

Link zum Dokument:

Du kannst es überprüfen hier

params : {}

Es gibt auch Neugranularere Einstellung params : {}. Wie wir bereits gesehen haben, können wir Parameter als Teil von deklarieren url. Aber mit params : {} Konfiguration – wir können 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 beschrieben $stateProvider

Nachfolgend nur ein Auszug

  • Wert – {Objekt|Funktion=}: gibt den Standardwert für diesen Parameter an. Dadurch wird dieser Parameter implizit als optional festgelegt …
  • Array – {boolesch=}: (Standard: 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 mit dem Standardwert identisch ist.

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

Sie müssen die Parameter nicht unbedingt in der URL haben.

Zum Beispiel mit:

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

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

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

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

Natürlich, wenn Sie die Seite einmal neu laden home Zustand verlieren Sie die Zustandsparameter, da sie nirgendwo gespeichert sind.

Eine vollständige Beschreibung dieses Verhaltens ist dokumentiert hierunter dem params Reihe in der state(name, stateConfig) Sektion.

Du hast einfach falsch geschrieben $stateParames sollte sein $stateParams (mit einem s). Deshalb wirst du undefiniert 😉

  • Im Allgemeinen sollte dies als Kommentar in der Frage stehen. Aber trotzdem +1 für die Bemühungen, die Frage zu lesen und das Problem zu verstehen 🙂

    – Anmol Saraf

    7. Januar 2016 um 16:32 Uhr

1017490cookie-checkSo übergeben Sie Parameter mit ui-sref in ui-router an den Controller

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy