問題タブ [nested-views]

ui-routerは、angular の標準ルーターの優れた代替手段です。ネストされた状態とビュー、および複数のビューをサポートします。

とはいえ、両者の違いに少し戸惑います。複数のビューは、ほとんどの場合、「高次」コンポーネントのネストされたビューとして考えて実装できるように思えます。たとえば、サイドバーとコンテンツ ボックスを備えたアプリを検討する場合、それらを 2 つの「並列」ビューとしてモデル化するか、サイドバーを親ビューにし、コンテンツ ペインを選択したサイドバー アイテムに依存するネストされた子ビューとしてモデル化することができます。 .

readme自体は、分割が明確ではないことを示唆しているようです:

プロのヒント: 複数の並列ビューは強力な機能ですが、多くの場合、ビューをネストし、それらのビューをネストされた状態とペアにすることで、より効果的にインターフェイスを管理できます。

複数のビューとネストされたビューを使用する必要があるのはいつですか? ほとんどの場合、ネストされた状態と複数の状態をモデル化する正しい方法を選択するのに役立つ基準はありますか?

私は ui-router を使用しており、独自のコントローラーを持つコントローラーと子ビューを持つ親ビューを使用している構成があります。子ビューの 1 つに移動するたびに、親コントローラーが再度インスタンス化されるため、サーバーに対して不要な要求が実行されます。子の状態間を移動し、親コントローラーによって解決された変数を再利用できるようにしたいと考えています。

親コントローラーが毎回インスタンス化されないようにするにはどうすればよいですか?

これは私のルーティング設定です:

これが HTML です。

angular-ui-router を使用して、ネストされた名前付きビューをロードしています。

index.html ファイルには、名前のないビューと名前の付いたビューがあります。

インデックス.html:

名前付きビューheaderに header.html をロードします。ヘッダー ビューには、 contactsSearchとcountriesという名前の 2 つのビューがあります。

Header.html:

index.html ファイルの名前のないビューで、contacts.html をロードしたいと考えています。

Contacts.html:

myApp、countries、contactsの3 つのモジュールを使用します。各モジュールのルートを構成しました。

MyAppモジュール:

国モジュール:

連絡先モジュール:

何も表示されず、理由がわからないため、コードが正しくありません。調査の結果、親は 1 つの状態しか持てないことがわかりましたが、home.contacts、home.contactsSearch、およびhome.countriesが同じ親であるhomeを持つ必要があります。

誰かがこれで私を助けてくれますか?

詳細については、jsfiddle を作成しました: https://jsfiddle.net/cjtnmbjw/3/

ありがとうございました

フロントエンドでいくつかのルーティングを処理するために角度のある ui ルーターを使用しています。これは私のルーティングコードがどのように見えるかです。

私のhtmlは複数のネストされたビューを利用しています。できる限り説明しようと思います

index.html

/static/home.html

そのため、複数レベルのネストが進行中です

ここで、初めてページをロードすると、警告メッセージが表示されます

一度だけ発火します..それは理にかなっています。ただし、ページネーション内の「次のページ」をクリックするとします..

これにより、最終的に「ReaderCtrl」内の関数が起動します

これにより、URLが更新され、次のようになります

このようなものに

さて、私が髪を引き裂く部分について。

ルーティングのリーダー セクションの「解決」コード ブロックに戻ります。

警告メッセージが 2 回表示されます。

Web コンソールで少しデバッグを行ったところ、順序が正しいことがわかりました。

NavCtrl で何が起こっているのかを知りたいと思うかもしれませんが、私はそこに呼び出しを行っていません。NavCtrl にあるのは、/static/partials/home.html のスコープを更新するために、ReaderCtrl が継承できる関数だけです。

本当に、ここでステップ 3 に行き詰まっているように見えます。

私の解決ブロックが2回起動しているように見える理由について、誰か考えがありますか?

編集：

もう少しデバッグした後、「updatePage」関数が実行された直後から、順序が次のようになることがわかったようです。

だから、私は今私の質問だと思います...なぜ

最初のアラートが発生する前に URL を変更しないで、2 番目のアラートまたはその近くで URL を変更しますか?

編集2：私の問題を解決することができなかったので、当分の間それをハッキングしました...私は本質的に、 $state.go() が舞台裏で行っていると想定していることを行う関数を作成し、 URL。

3 つの列を持つページを作成する必要があります。

3 つの階層的な UI 状態があります。

階層状態に基づく非階層ビュー レイアウトを実現するために、異なるビュー .html ファイルのどこにどのように ui-view 属性を配置するのかわかりません。

index.html:

ライブラリ.html:

book.html:

page.html:

明らかに階層的なビュー レイアウトになってしまいますが、これは私の場合には受け入れられません (状態 #/library/1/20 など):

状態階層を維持しながら、子ビューを親の兄弟にすることは可能ですか?

私は AngularJS を初めて使用し、SPA に Angular UI-Router を使用しています。

私がやろうとしているのは、子ビューから親ビューの値を更新することです。入れ子になったビューと複数のビューに関する UI-Router のドキュメントを調べましたが、値を更新する方法が見つかりませんでした。

私のユースケースは、親ビューがヘッダーになり、状態遷移を介して子ビューが変更されるたびに、親ビューの一部であるヘッダー値を更新したいということです。

コード :

HTML ファイル -

Angular UI-Routing 構成が行われる JS ファイル -

同じコード スニペットのJSFiddle リンクを次に示します。

親ビューがありますindex.html

のapp.js

これは私のprofile.html

私の中でProfileController

コンソールに表示されるデータは

ページviewprofile内をクリックすると、レンダリングされます。しかし、関数の値を子ビューに取得し、それらをhtmlタグにバインドしたいprofile.htmlviewprofile.htmlallProfiles()viewprofile

allProfiles()コントローラーにある関数出力を子ビューに取得するにはどうすればよいですかviewprofile.html

私のアプリはとてもシンプルです。ヘッダーと本文を含むホームページがあります。本文セクションでログインページを表示したいのですが、URL が「password/forget」に変更された場合、パスワードリセットフォームを表示します。私のテンプレート:

index.html :

home.html:

そして ui-router 設定はこれです:

「/password/forget」に移動すると、何かが起こり、index.htmlが表示されます。ルートが "/password/forget" に変更されたときに、forgetPassword.htmlを表示したいと考えています。

これはよくある質問だと思いますが、私の「ググる」スキルが私が望むものを得るのに十分ではないかもしれません.

だから私はng-viewそれがメインのindex.htmlであるページを持っています

これで、 student.htmlのテンプレート URL を持つビューができました

コードが示唆しているように、Controller_Aそれぞれ独自のテンプレートを持つ 3 つのビュー (正しいサブビュー) が必要です。

ルーティング コードは次のとおりです。

このアイデアを機能させるには、どのような変更を加える必要がありますか。私はチュートリアルを完了しましたが、残念ながらどれも同様の機能を持っていないか、間違ったスペースを探している可能性があります.

あなたの入力を待っています。よろしく！

PS: JS エラーはスローされません