$ state.go toParamsおよび$ stateParamsを使用してパラメーターを送信および取得する方法

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

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

ドキュメントによると、これはコントローラに$stateParamsを設定する必要がtoStateありundefinedますが、そうです。何が欠けていますか？

私はデモンストレーションするためにプランクを作成しました：

http://plnkr.co/edit/ywEcG1

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を使用せずに状態を遷移させる強力な手段だと思います。

ネイサンマシューズの解決策は私にとってはうまくいきませんでしたが、それは完全に正しいですが、回避策に到達する意味がほとんどありません。

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

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

$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に渡す場合も、配列の代わりにオブジェクトを使用する必要があります。

$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;
});

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

url: '/toState?referer'

どー！

AngularJS v1.2.0-rc.2とui-router v0.2.0で動作するかどうかは不明です。このソリューションを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!"});

このページのこれらの例はどれも私にとってはうまくいきませんでした。これは私が使ったもので、うまくいきました。一部のソリューションでは、URLを$ state.go（）と組み合わせることはできないと述べていますが、これは正しくありません。厄介なのは、URLのパラメーターを定義し、パラメーターをリストする必要があることです。両方とも存在する必要があります。Angular 1.4.8およびUIルーター0.2.15でテストされています。

で状態状態の終わりに、あなたのparamsを追加してのparamsを定義します。

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

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

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

次に、パラメーターを引き出して新しい状態のコントローラーで使用します（コントローラーの関数に$ stateParamsを渡すことを忘れないでください）。

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

私の場合、ここに記載されているすべてのオプションを試してみましたが、誰も正しく機能していません（angular 1.3.13、ionic 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});

乾杯

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キーは特に重要です。同様に、urlキーが存在しないことに注意してください。stateParamsとURLを組み合わせて使用​​することはできません。それらは相互に排他的です。

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

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

indexそしてanotherKey彼らは最初の$ stateControllerに記載されている場合は$ stateParams変数にのみ移入されますparams定義するキー。

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

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

渡された変数は利用できるはずです！

試してみreload: trueますか？

最も長い間何が起こっているのか理解できませんでした-私は自分をだましていたことがわかりました。物事が正しく書かれていて、同じ状態を使用することが確実な場合は、以下を試してくださいreload: true。

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

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

これにより時間を節約できることを願っています！

私も同じような問題に直面していました。多くのグーグルと試行錯誤の結果、私は実際に解決策を見つけました。ここにあなたのために働く私の解決策があります。

searchBoxControllerとstateResultControllerの 2つのコントローラーと、検索サーバーを持つビューからリモートサーバーからフェッチされた結果を表示するビューに渡されるsearchQueryというパラメーターがあります。これがあなたのやり方です：

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

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

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

.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;
    });

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

        .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'
                }
            }
        })

2つのパラメーターをとる状態になるようになったソリューションは変化していました。

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

に

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

router.jsで次のように定義します

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

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

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

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

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

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

私のrouter.jsに、paramsの名前と年齢を追加しました：

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

でPage1を、次のボタンのonClickの：

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

でPage2を、私はそれらのparamsにアクセスできます。

$stateParams.name
$stateParams.age

これが次のように渡したいクエリパラメータの場合： /toState?referer=current_user

次に、このようにあなたの状態を記述する必要があります：

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

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