5

単一ページのアプリケーションで、AngularJS ルートを前後に切り替えて、前に示したのと同じ状態で表示する方法はありますか?

通常、これは親スコープでデータをバインドすることによって実装されます。軽量ビューの場合は簡単にセットアップできますが、多くのグラフィック要素を保持するビューの場合は面倒な場合があります。

以下は、以前のルート状態を記憶することでユーザー エクスペリエンスを向上させることができる例です。次のページで、次のことを想像してください。

  • アイテム 1 の上に立って、タブ 2 を選択します。
  • その後、項目 2 に移動します
  • 最後に項目 1 に戻ります: タブ 2 はもう選択されていません :-(

http://angular-route-segment.com/src/example/#/section1/1

ルートを前後に切り替えると、ビューが破棄/構築されるようです。

解決策は、ユーザー インターフェイスの状態を親スコープに格納することですが、次の落とし穴があります。

  • ユーザー インターフェイスの詳細をすべて格納するオブジェクトを作成する
  • 以前と同じ状態での UI の保存とリセットに関する複雑なロジックの作成
  • UI 状態をデータ モデルに保存することは、MVC のようには聞こえません。

ビューを格納する div の表示/非表示を使用すると状態が保存されますが、ルートは使用されず、切り替えビジネスは手動で実装する必要があります。1. ブラウザーの履歴ナビゲーション (URL のハッシュ) と 2. セットアップが簡単なため、ルートを使用するのが好きです。

UI の状態が記憶されていないことは、Chrome がタブ間を行ったり来たりするときにページをリロードするようなものです。あまりユーザー フレンドリーではありません。

Angular-wayはありますか？

4

1 に答える 1

1

あなたの $routeSegment アプローチは非常に興味深いものです。$routeSegment サービスは、次の目的で $routeChangeStart イベントにプラグインできます。

  • どういうわけか、これまでに見たすべてのパスで「サブパス履歴」を保持します。おそらく、UI 状態を保持するように明示的に構成されたパスのみです。パス「/section1/1」の例では、タブ2が選択されている場合、保存されたサブパスは「/Y」になります。$routeParams を使用した動的パスもカバーする必要がある可能性があるため、事態は興味深いものになります。
  • この履歴を使用して、イベント ハンドラーで $location.path を使用してリダイレクトします。したがって、next.originalPath が「/section1/1」である $routeChangeStart イベントは、「/section/1/Y」にリダイレクトされる可能性があります。
于 2014-02-11T12:33:32.657 に答える