Wie übergebe ich Parameter mithilfe von ui-sref im UI-Router an einen Controller?

Übergabe von Parametern an den Controller mithilfe von ui-sref im UI-Router

Übergabe von Parametern im UI-Router an einen Controller über ui-sref ist ein entscheidendes Element für den Datenaustausch zwischen Staaten. So erledigen Sie diese Aufgabe effektiv:

Definieren Sie zunächst die URL des Zielstatus so, dass sie Parameterplatzhalter enthält, indem Sie die Doppelpunktsyntax verwenden, wie in der unten gezeigten aktualisierten Statusdefinition dargestellt:

$stateProvider
.state('home', {
  url: '/:foo?bar',
  ...

In diesem Beispiel erwartet der Status „Home“ die Parameter „foo“ und „bar“ im URL-Pfad.

Passen Sie als Nächstes den Controller an, um diese Parameter korrekt zu empfangen:

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

In diesem Controller injizieren wir $stateParams anstelle von $stateParam, was uns Zugriff auf die übergebenen Parameter gibt.

Darüber hinaus bietet UI-Router auch eine feinkörnige Parameterkonfiguration über das „params“-Objekt innerhalb des Status Definition. Mit dieser Option können Sie Standardwerte angeben, Typbeschränkungen festlegen und mehr.

Betrachten Sie beispielsweise diese erweiterte Parameterkonfiguration:

.state('other', {
  url: '/other/:foo?bar',
  params: {
    foo: {
      value: 'defaultValue',
      squash: false,
    },
    bar: {
      array: true, // Treat bar as an array
    },
    hiddenParam: 'YES', // Not present in the URL
  },
  ...

Diese Konfiguration zeigt, wie wir Standardwerte für definieren können Parameter und steuern ihr Verhalten in der URL.

Denken Sie abschließend daran, die Parameter zu übergeben, wenn Sie zum gewünschten Status navigieren, indem Sie entweder das Attribut „ui-sref“ oder die Methode „$state.go()“ verwenden:

<a ui-sref="other({foo: 'fooVal1', bar: 'barVal1'})">...</a>
$state.go('home', {foo: 'fooVal2', bar: 'barVal2'});

Durch die Implementierung dieses Ansatzes können Sie mithilfe von ui-sref im UI-Router effizient Parameter an Controller übergeben und so nahtlose Zustandsübergänge und Datenfreigabe innerhalb Ihrer AngularJS-Anwendungen gewährleisten.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Parameter mithilfe von ui-sref im UI-Router an einen Controller?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!