Heim >Web-Frontend >js-Tutorial >Wie kann ich Parameter mithilfe von ui-sref im ui-router an Controller übergeben?
Übergabe von Parametern an Controller mithilfe von ui-sref im ui-router
Im ui-router wird ui-sref zum Übergang in einen Status verwendet ermöglicht die Übergabe von Parametern an die Steuerung. Zur Verdeutlichung können Sie zwei Parameter, „foo“ und „bar“, an einen Zielzustand senden und empfangen.
Zustandsdefinition
Aktualisieren Sie die Zustandsdefinition auf „Akzeptieren“. Parameter in der URL:
$stateProvider .state('home', { url: '/:foo?bar', views: { '': { templateUrl: 'tpl.home.html', controller: 'MainRootCtrl' } } });
Controller-Verbrauch
Rufen Sie innerhalb des Controllers die Parameter von $stateParams ab:
.controller('MainRootCtrl', function($scope, $state, $stateParams) { //.. var foo = $stateParams.foo; //getting fooVal var bar = $stateParams.bar; //getting barVal //.. })
Link-Generierung
Um die Parameter zu übergeben, verwenden Sie diese Syntax:
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">
Dies führt zum Übergang in den „Home“-Zustand mit den angegebenen foo- und bar-Parametern, die dann ausgeführt werden können kann im Controller über $stateParams aufgerufen werden.
Parameter anpassen (optional)
Mit der Eigenschaft „params“ in der Statusdefinition können Sie das Parameterverhalten weiter konfigurieren:
$stateProvider .state('other', { url: '/other/:foo?bar', params: { foo: { value: 'defaultValue', squash: false, }, bar: { array: true, }, hiddenParam: 'YES', // (not in URL) } });
Zu den Parametereinstellungen gehören:
Parameterinjektion
Controller-Parameterinjektion erfolgt über $stateParams. Sie können Werte abrufen mit:
var paramValue = $stateParams.paramName;
Auf diese Weise ermöglicht der UI-Router die Parameterübergabe zwischen Zuständen mithilfe von ui-sref für einfache Zustandsübergänge und Parameterzugänglichkeit im Controller.
Das obige ist der detaillierte Inhalt vonWie kann ich Parameter mithilfe von ui-sref im ui-router an Controller übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!