AngularJS uiルーターがURLなしで状態間でデータを渡す


146

私は、URLでデータを公開せずに2つの状態間でデータを渡すというこの問題に直面しています。ユーザーがこの状態に直接到達できないようです。

例えば。「A」と「B」の2つの状態があります。状態「A」でサーバー呼び出しを実行し、呼び出しの応答を状態「B」に渡します。サーバー呼び出しの応答は文字列メッセージであり、非常に長いため、URLでそれを公開することはできません。

それで、角度uiルーターで、URLパラメータを使用せずに状態間でデータを渡す方法はありますか?

回答:


185

我々は使用することができparams新しい UI-ルータの機能を:

APIリファレンス/ ui.router.state / $ stateProvider

paramsオプションでURLで宣言されたパラメーターを構成するか、追加の非URLパラメーターを定義するマップ。構成するパラメーターごとに、パラメーターの名前をキーとする構成オブジェクトを追加します。

次の部分を参照してください:「...または追加の非URLパラメータを定義...

したがって、州の定義は次のようになります。

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

上記ドキュメントを構成する例はほとんどありません。

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND-実際の例:http ://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p= info

状態定義の例を次に示します。

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

これは、ui-srefを使用した呼び出しである可能性があります。

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

ここの例を確認してください


示唆されたように、ネストされた状態でparamsを使用しようとしました(例-"/ user / profile / contacts"、それは私にいくつかのエラーを与えました。親の状態にも "params"を定義する必要がありますか?
vijay tyagi

詳細な回答のおかげで、親にパラメータを定義させる必要はないようです。
vijay tyagi 2015

とにかくそれが役に立った場合は素晴らしい;)強力なUIルーターを楽しむ
RadimKöhler

1
残念ながら、これはui-router 0.2.10では機能せず、それを使用しています。バージョンを0.2.10に変更すると、このエラーが発生しました-エラー:状態 'home'の無効な
パラメーター

1
@vijaytyagi、アップグレードする必要があります。単に、古いバージョンを実行し続ける理由はありません。そして、私が覚えている限り、移動はスムーズでなければなりません...
RadimKöhler

38

paramsオブジェクトは$ stateParamsに含まれていますが、URLの一部にはなりません。

1)ルート構成:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2)コントローラで:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A)コントローラーからの状態の変更

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B)HTMLで状態を変更する

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

プランカーの例


1
ありがとう、完璧。また、$ stateと$ stateParamsの両方が必要な場合は、$ stateを挿入するだけでよいことに注意してください。stateParamsオブジェクトは$ stateのプロパティです:$ state.params。
マイケルK

1
残りのステップを機能させるには、ステップ1(デフォルト値を提供)が必要であることを伝える必要があります;-)
Xtreme Biker

2
簡潔な例をありがとう。私のために働く!(UI-Router v 1.0.3)
Roboprog 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.