web-dev-qa-db-ja.com

$ state.go toParamsと$ stateParamsを使用してパラメータを送受信する方法

AngularJS v1.2.0-rc.2とui-router v0.2.0を使用しています。参照元の状態を別の状態に渡したいので、次のように$state.goのtoParamsを使用します。

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

のドキュメント によると、これはtoStateコントローラの$stateParamsを生成するはずですが、それはundefinedです。何が足りないの？

説明するためにplunkを作成しました。

http://plnkr.co/edit/ywEcG1

angularjsangular-ui-router
122
gwhn

私がしなければならなかったのは、そのようにURL状態定義にパラメータを追加することだけでした

url: '/toState?referer'

やあ！

27
gwhn

URL以外の状態を渡したい場合は、urlを設定するときにstateを使用しないでください。私は PR上に という答えを見つけ、理解を深めるために何度か猿を回しました。

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

それからあなたはそのようにそれにナビゲートすることができます：

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

または

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

そしてHTMLではこのように：

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

このユースケースはドキュメントで完全には明らかにされていませんが、URLを使用せずに状態を遷移させるための強力な手段だと思います。

144
bbrown

Nathan Matthewsの解決策は私にはうまくいきませんでしたが、それは完全に正しいものですが、次善策に達することにはほとんど意味がありません。

重要なポイントは次のとおりです。定義されたパラメータの種類と$ state.goのtoParamasは、状態遷移の両側で同じ配列またはオブジェクトである必要があります。

たとえば、次のように状態にparamsを定義すると、 "[]"を使用しているため、paramsはarrayになります。

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

だからあなたもこのように配列としてtoParamsを渡す必要があります：

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

そして、あなたはこのように配列として$ stateParamsを通してそれらにアクセスすることができます：

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

より良い解決策は両側で配列の代わりにオブジェクトを使うことです：

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

Paramsの定義で[]を{}に置き換えました。 toParamsを$ state.goに渡すには、arrayの代わりにobjectを使うべきです。

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

それから、あなたは簡単に$ stateParamsを通してそれらにアクセスすることができます：

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

それがui-router v0.2.0でAngularJS v1.2.0-rc.2で動作するかどうかわからない。私はこのソリューションをAngularJS v1.3.14とui-router v0.2.13でテストしました。

Gwhnが推奨するようにURLにパラメータを渡す必要がないことを私はただ理解しています。

あなたの状態定義にデフォルト値であなたのパラメータを追加するだけです。あなたの状態はまだUrl値を持つことができます。

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

そして$state.go()にパラメータを追加します

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

このページのこれらの例はどれも私にとってはうまくいきませんでした。これが私が使ったもので、うまくいきました。いくつかの解決策はあなたが$ state.go（）とurlを組み合わせることができないと言いました、しかし、これは本当ではありません。厄介なことはあなたがURLのパラメータを定義しなければならず、またパラメータをリストしなければならないということです。両方存在している必要があります。 Angular 1.4.8およびUIルーター0.2.15でテスト済み。

状態で、パラメータを状態の最後に追加して、パラメータを定義します。

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

あなたのコントローラでは、go文は次のようになります。

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

それからparamsを引き出して、あなたの新しい状態のコントローラでそれらを使うために（$ stateParamsをあなたのコントローラ関数に渡すことを忘れないでください：

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

私の場合、私はここで与えられたすべてのオプションを試してみましたが、だれもきちんと働いていませんでした（angle 1.3.13、イオン1.0.0、angular-ui-router 0.2.13）。解決策は次のとおりです。

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

そしてstate.goでは：

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

乾杯

10
Cris R

私はIonic/Angularの$ state＆$ stateParamsと戦うのにかなりの時間を費やしました。

$ state.go（）と$ stateParamsを利用するには、特定のものを設定しなければならず、他のパラメータが存在してはいけません。

私のapp.config（）に$ stateProviderを含め、その中にいくつかの状態を定義しました。

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

paramsキーは特に重要です。同様に、stateParamsとURLを利用したurlキーは存在しません。それらは互いに排他的です。

$ state.go（）呼び出しで、次のように定義します。

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

indexおよびanotherKey $ stateParams変数は、それらが$ stateController params定義キーに最初にリストされている場合にのみ入力されます。

図のように、コントローラ内に$ stateParamsを含めます。

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

渡された変数は利用可能であるべきです！

8
Nathan Matthews

reload: trueで試してみませんか？

最長の時間で何が起こっているのかわからなかった - 私は自分自身をだましていたことがわかりました。物事が正しく書かれていると確信していて、同じ状態を使うつもりなら、reload: trueを試してください。

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

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

これがあなたの時間を節約することを願っています！

5
Cody

私は同じような問題に直面したでしょう。私はたくさんのグーグルと試行錯誤の末、実用的な解決策を見つけました。これはあなたのために働くだろう私の解決策です。

私は2つのコントローラがあります - searchBoxControllerとstateResultControllerおよびsearchQueryという名前のパラメータ検索ボックスを持つビューから、リモートサーバーから取得した結果を示すビューに渡される。これがあなたのやり方です：

以下は$state.go()を使って次のビューを呼び出すコントローラです。

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

以下は、$state.go()が実行されたときに呼び出される状態です。

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

そして最後に、コントローラはapp.searchResults状態に関連付けられています。

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

そして私の親子関係の場合。子状態で宣言されたすべてのパラメータは、親状態によって認識される必要があります。

        .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

2つのパラメータをとる状態になるための解決策は変わりました。

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

に

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

これがあなたがこのように渡すことを望むクエリパラメータであるならば：/toState?referer=current_user

それからあなたはこのようにあなたの状態を説明する必要があります：

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

ソース： https://github.com/angular-ui/u -router/wiki/URL-Routing＃query-parameters

0
lgx

私は1ページから2ページに移動しようとしていました、そして私もいくつかのデータを渡さなければなりませんでした。

私のrouter.jsに、paramsnameとageを追加しました：

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

Page1で、次のボタンをクリックして：

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

Page2では、これらのパラメータにアクセスできます。

$stateParams.name
$stateParams.age
0
Praveesh P

あなたの定義はrouter.jsで

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

あなたのコントローラは$ stateParamsを追加する必要があります。

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

次のようにパラメータでオブジェクトを送信できます。

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