web-dev-qa-db-de.com

Wie kann ich mit $ state.go toParams und $ stateParams Parameter senden und abrufen?

Ich verwende AngularJS v1.2.0-rc.2 mit ui-router v0.2.0. Ich möchte den Referrer-Status an einen anderen Status übergeben, daher verwende ich die toParams von $state.go wie folgt:

$state.go('toState', {referer: $state.current.name});

Laut den Anweisungen von docs sollte dies den $stateParams auf dem toState-Controller auffüllen, es ist jedoch undefined. Was vermisse ich?

Ich habe einen Plunk erstellt, um zu demonstrieren: 

http://plnkr.co/edit/ywEcG1

120
gwhn

Alles, was ich tun musste, war, einen Parameter zur URL-Statusdefinition hinzuzufügen

url: '/toState?referer'

Doh!

27
gwhn

Wenn Sie den Nicht-URL-Status übergeben möchten, dürfen Sie url nicht beim Einrichten Ihrer state verwenden. Ich fand die Antwort auf einer PR und machte ein paar Affen, um es besser zu verstehen.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

Dann können Sie wie folgt navigieren:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Oder:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

Und in HTML also:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

Dieser Anwendungsfall ist in der Dokumentation vollständig aufgedeckt, aber ich denke, er ist ein wichtiges Mittel, um den Status ohne URLs zu ändern.

143
bbrown

Die Lösung von Nathan Matthews hat für mich nicht funktioniert, ist aber völlig richtig, aber es gibt wenig Sinn, einen Workaround zu finden:

Der Schlüsselpunkt ist: Typ der definierten Parameter und toParamas von $ state.go sollten auf beiden Seiten des Zustandsübergangs dasselbe Array oder Objekt sein.  

Wenn Sie beispielsweise einen Parameter in einem Status wie folgt definieren, bedeutet dies, dass Params ein Array ist, weil "[]" verwendet wird:

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

So sollten Sie auch toParams als Array übergeben:

params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

Und Sie können über $ stateParams als Array wie folgt darauf zugreifen:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams[0];
    var anotherKey = $stateParams[1];
});

Bessere Lösung verwendet Objekt statt Array auf beiden Seiten :

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      {'index': null, 'anotherKey': null},
    controller:  'overviewController'
})

Ich habe in der Definition von params [] durch {} ersetzt. Für die Übergabe von toParams an $ state.go sollten Sie auch object anstelle von array verwenden:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

dann können Sie einfach über $ stateParams darauf zugreifen:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});
46
Reza Rahimi

Nicht sicher, ob es mit AngularJS v1.2.0-rc.2 mit ui-router v0.2.0 funktioniert .. __ Ich habe diese Lösung auf AngularJS v1.3.14 mit ui-router v0.2.13 getestet.

Mir ist nur klar, dass es nicht notwendig ist, den Parameter in der URL zu übergeben, wie es von gwhn empfohlen wird.

Fügen Sie einfach Ihre Parameter mit einem Standardwert in Ihrer Statusdefinition hinzu .. _. Ihr Status kann immer noch einen URL-Wert haben.

$stateProvider.state('state1', {
    url : '/url',
    templateUrl : "new.html",
    controller : 'TestController',
    params: {new_param: null}
});

und füge den Parameter zu $state.go() hinzu

$state.go('state1',{new_param: "Going places!"});
15
Phyxius

Keines dieser Beispiele auf dieser Seite hat für mich funktioniert. Das habe ich benutzt und es hat gut funktioniert. In einigen Lösungen wurde angegeben, dass Sie die URL nicht mit $ state.go () kombinieren können. Dies ist jedoch nicht der Fall. Das Umständliche ist, dass Sie die Parameter für die URL definieren und auch die Parameter auflisten müssen. Beide müssen anwesend sein. Getestet auf Angular 1.4.8 und UI Router 0.2.15.

Im state fügen Sie Ihre Parameter zum End of State hinzu und definieren Sie die Parameter:

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

In Ihrem Controller sieht Ihre go-Anweisung folgendermaßen aus:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

Dann ziehen Sie die Parameter heraus und verwenden Sie sie in Ihrem Controller des neuen Status (vergessen Sie nicht, $ stateParams an Ihre Controller-Funktion zu übergeben)

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!
14
mbokil

In meinem Fall habe ich versucht, mit allen hier angegebenen Optionen zu arbeiten, aber niemand funktionierte ordnungsgemäß (Winkel 1.3.13, Ionic 1.0.0, Winkel-Ui-Router 0.2.13). Die Lösung war:

.state('tab.friends', {
      url: '/friends/:param1/:param2',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })

und im state.go:

$state.go('tab.friends', {param1 : val1, param2 : val2});

Prost

10
Cris R

Ich habe viel Zeit damit verbracht, mit Ionic/Angulars $ state & $ stateParams zu kämpfen.

Um $ state.go () und $ stateParams verwenden zu können, müssen Sie bestimmte Einstellungen vornehmen und andere Parameter dürfen nicht vorhanden sein.

In meiner app.config () habe ich $ stateProvider eingefügt und darin mehrere Status definiert:

$stateProvider
    .state('home', {
        templateUrl: 'home',
        controller:  'homeController'
    })
    .state('view', {
        templateUrl: 'overview',
        params:      ['index', 'anotherKey'],
        controller:  'overviewController'
    })

Die params-Taste ist besonders wichtig. Beachten Sie auch, dass KEINE url-Schlüssel vorhanden sind. StateParams und URLs werden NICHT gemischt. Sie schließen sich gegenseitig aus.

Definieren Sie es im Aufruf $ state.go () wie folgt:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

Die Variablen index und anotherKey $ stateParams werden NUR aufgefüllt, wenn sie zuerst im Definitionsschlüssel $ stateController params aufgeführt sind.

Fügen Sie innerhalb des Controllers $ stateParams wie abgebildet hinzu:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Die übergebenen Variablen sollten verfügbar sein!

8
Nathan Matthews

Versuchen Sie es mit reload: true?

Ich konnte nicht herausfinden, was am längsten vor sich ging - es stellte sich heraus, dass ich mich selbst betrog. Wenn Sie sicher sind, dass die Dinge richtig geschrieben wurden und Sie denselben Status verwenden möchten, versuchen Sie reload: true:

.state('status.item', {
    url: '/:id',
    views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });

Hoffe, das erspart dir Zeit!

5
Cody

Ich hatte ein ähnliches Problem. Nach vielem googeln und probieren und testen bekam ich eine funktionierende Lösung. Hier ist meine Lösung, die für Sie funktionieren würde.

Ich habe zwei Controller - searchBoxController und stateResultController und einen Parameter namens searchQuery , der von einer Ansicht mit einem Suchfeld an eine Ansicht übergeben werden soll, die die von einem Remote-Server abgerufenen Ergebnisse zeigt. Das ist wie man es macht:

Unten ist der Controller, von dem aus Sie die nächste Ansicht mit $state.go() aufrufen.

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

Unten ist der Status, der aufgerufen wird, wenn $state.go() ausgeführt wird:

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

Und schließlich der Controller mit dem Status app.searchResults verbunden:

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });
4

Und in meinem Fall eines Elternteils/Kindzustandes. Alle im untergeordneten Status deklarierten Parameter müssen dem übergeordneten Status bekannt sein

        .state('full', {
            url: '/full',
            templateUrl: 'js/content/templates/FullReadView.html',
            params: { opmlFeed:null, source:null },
            controller: 'FullReadCtrl'
        })
        .state('full.readFeed', {
            url: '/readFeed',
            views: {
                'full': {
                    templateUrl: 'js/content/templates/ReadFeedView.html',
                    params: { opmlFeed:null, source:null },
                    controller: 'ReadFeedCtrl'
                }
            }
        })
3
zinking

Die Lösung, die wir zu einem Zustand mit zwei Parametern führten, änderte sich:

.state('somestate', {
  url: '/somestate',
  views: {...}
}

zu

.state('somestate', {
  url: '/somestate?id=:&sub=:',
  views: {...}
}
2
Seth Caldwell

Wenn dies ein Abfrageparameter ist, den Sie wie folgt übergeben möchten: /toState?referer=current_user

dann müssen Sie Ihren Zustand so beschreiben:

$stateProvider.state('toState', {
  url:'toState?referer',
  views:{'...'}
});

source: https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters

0
lgx

Ich habe versucht, von Seite 1 zu Seite 2 zu navigieren, und ich musste auch einige Daten übergeben.

In meiner router.js habe ich die Parameter name und age hinzugefügt:

.state('page2', {
          url: '/vehicle/:source',
          params: {name: null, age: null},
.................

In Page1 , onKlicken Sie auf die nächste Schaltfläche: 

$state.go("page2", {name: 'Ron', age: '20'});

In Page2 konnte ich auf diese Parameter zugreifen:

$stateParams.name
$stateParams.age
0
Praveesh P

Sie definieren Folgendes in router.js

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

Ihr Controller muss $ stateParams hinzufügen.

function UserCtrl($stateParams) {
    console.log($stateParams);
}

Sie können ein Objekt wie folgt über Parameter senden.

$state.go('users', {obj:yourObj});
0
MahmutKarali