Wie man Parameter über ui-sref in ui-router an den Controller übergibt

Question

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

Etwas Ähnliches wie der folgende Link, um den Zustand mit den Parametern foo und bar zu wechseln:

Gehe zum Startzustand mit den Parametern foo und bar 

Empfangen von Werten foo und bar in einem Controller:

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

In meinem Controller erhalte ich undefined für $stateParams.

Kann mir jemand helfen zu verstehen, wie ich das machen kann?

Bearbeiten:

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

    },

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

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

});

Answer 1

Ich habe ein Beispiel erstellt, um zu zeigen, wie es gemacht wird. 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; //fooVal abrufen
    var bar = $stateParams.bar; //barVal abrufen
    //..
    $scope.state = $state.current
    $scope.params = $stateParams; 
})

Was wir sehen können, ist dass der Zustand home jetzt eine URL definiert hat als:

url: '/:foo?bar',

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

/fooVal?bar=barValue

Diese beiden Links geben die Argumente korrekt an den Controller weiter:

Außerdem verwendet der Controller $stateParams anstelle von $stateParam.

Link zur Dokumentation:

• URL-Parameter

Sie können es hier überprüfen

params : {}

Es gibt auch eine neue, detailliertere Einstellung params : {}. Wie bereits gesehen, können wir Parameter als Teil der 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: { 
        // hier definieren wir den Standardwert für foo
        // wir setzen auch squash auf false, um das Einsetzen auch des Standardwerts in die URL zu erzwingen
        foo: {
          value: 'Standardwert',
          squash: false,
        },
        // dieser Parameter ist jetzt ein Array
        // wir können mehr Elemente übergeben und sie als [] erwarten
        bar : { 
          array : true,
        },
        // dieser Parameter ist nicht Teil der URL
        // er könnte mit $state.go oder ui-sref übergeben werden
        hiddenParam: 'JA',
      },
    ...

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

Im Folgenden ein Auszug:

• value - {object|function=}: gibt den Standardwert für diesen Parameter an. Dadurch wird dieser implizit als optional gesetzt...
• array - {boolean=}: (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 identisch mit dem Standardwert ist.

Wir können diese Parameter folgendermaßen aufrufen:

// versteckter Parameter kann nicht über die URL übergeben werden

// Standard-Foo wird übersprungen

Sehen Sie es in Aktion hier

Answer 2

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

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

$state.go('home', {foo: true, bar: 1});
// oder
Los!

Natürlich gehen die Statusparameter verloren, wenn Sie die Seite einmal im home Status neu laden, da sie nirgendwo gespeichert werden.

Eine ausführliche Beschreibung dieses Verhaltens finden Sie unter hier, unter der params Zeile im state(name, stateConfig) Abschnitt.

Answer 3

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