[解決済み] AngularJSのuiルータは、URLなしで状態間のデータを渡す
2022-05-09 17:33:35
質問
私は、URLでデータを公開することなく、2つの状態間でデータを渡すこの問題に直面している、それはユーザーが実際にこの状態に直接着陸できないようなものです。
例えば 私は2つの状態 "A" と "B" を持っています。 私は状態 "A"でいくつかのサーバー呼び出しを行い、呼び出しの応答を渡します。 を状態 "B"に変更します。サーバーコールの応答は文字列メッセージで、かなり長いので、私はURLでそれを公開することはできません。
だから、URLのパラメータを使用せずに、状態間のデータを渡すために、アンギュラーuiルータで何か方法はありますか?
どのように解決するのですか?
を使用することができます。
params
,
新しい
UI-Routerの機能です。
API リファレンス / ui.router.state / $stateProvider
params
オプションでurlで宣言されたパラメータを設定したり、url以外の追加パラメータを定義するマップです。設定されるパラメータごとに、パラメータ名をキーとする設定オブジェクトを追加します。
部分参照:" ...または、追加の非urlパラメータを定義する... "です。
つまり、状態のdefはこうなる。
$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>
例を確認する こちら
関連
-
[解決済み】npm UNMET PEER DEPENDENCYの警告を修正するにはどうすればいいですか?
-
[解決済み】TypeError: window.initMap is not a function
-
[解決済み] 'ApplicationSignInManager' が見つからない(ASP.NET MVC)
-
[解決済み] AngularJS : ローカルストレージを使用する
-
[解決済み] AngularJs .$setPristineでフォームをリセットする
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み] AngularJS で $http.get リクエストにデータを渡す
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJS ui-router ログイン認証
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
angularjs ローカルデータストレージ LocalStorage
-
[解決済み] AngularJSで$httpリクエスト中にスピナーGIFを表示する?
-
[解決済み] select 要素のデフォルト値を設定するための ng-option の使用方法
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] Angular UI-Routerのマルチビュー
-
[解決済み] ng-repeat内で$indexを使用して、クラスを有効にしてDIVを表示するにはどうすればよいですか?
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] AngularJS : ローカルストレージを使用する
-
[解決済み] angularjsで$compileを操作する
-
[解決済み] ng-pattern` - 数字だけをチェックする方法は?