4

Google のホームページ機能を Angular で複製したいのですが、残念です。私は Egghead のビデオを見て、API 全体を読みましたが、その正確な動作の特定の例はありません。私がやりたいことは次のとおりです。

  • ユーザーがホームページにアクセスすると、メインの検索バーが表示され、一般的な黒いヘッダー バーが表示されます
  • ユーザーが何かを検索し、「検索」を押したときにのみメインの検索バーが消え、URL が mysite.com/q/searchTerm に変わり、新しいサブヘッダーが Google のホームページと同じように黒いヘッダー バーの下に表示されます。メインの検索フィールドが削除され、メインのヘッダー バーの下の灰色がかったバーに配置されます (インスタント検索をオフにしている場合)。
  • 検索結果は、Google と同じように、なくなったメイン検索バーの代わりに表示されますが、この部分はルートとビューで処理できます。2 つの同一のコントローラー間のレイアウトの切り替えが気になります。

これまでに試したことは次のとおりです。

  • 両方の MainCtrl サブ コントローラーの親コントローラーを作成し、その scope.data = {searchHeaderDisplay: false} を設定します。
  • まったく同じ機能を共有するため、両方のサブ コントローラーに同じ名前 (MainCtrl) を共有させます。
  • ヘッダーバーの ng-show="data.searchHeaderDisplay" とメインの ng-hide="data.searchHeaderDisplay" を作成し、検索ボタンの ng-click で data.searchHeaderDisplay を切り替えてみてください。これは機能しませんでした。効果はありませんでした。

私はまだ AngularJS に慣れてきているので、非常に単純であると確信しています。学ぶために実用的な例が 1 つまたは 2 つ必要なだけです。

編集: セカンダリ ヘッダー (検索フィールドが小さい) を検索結果と共に別のビュー テンプレートに押し込み、ルート ビューだけをメインの検索フィールドにする方がよいでしょうか? ドキュメントは、ビューとルート、特に何かを実行する複数のコントローラーを持つルートに関するベスト プラクティスについて非常に緩いです。

4

2 に答える 2

3

AppCtrl (これは基本的に $rootScope のように動作します) の代わりに ( $parentHTML 構造を変更するとこれが壊れる可能性があるため、脆弱なソリューションです。たとえば、$parent.$parent...中間の ng- controller)、ヘッダーに関連するモデル データを格納するサービスを提案します。と呼びましょうsearchService。

このモデルに影響を与える必要があるコントローラーは、サービスを注入できます。これには、依存関係が明確であるという追加の利点があります (依存関係が明確でないコントローラーの $scope 継承と比較して)。たとえば、ユーザーが「検索」を押すと、コントローラーはサービスで定義された通知メソッドを呼び出すことができます searchService.newSearchTerm(searchTerm)。これで、モデルの変更を監視しているすべてのビュー (ヘッダー ビューなど) が変更を認識し、それに応じて更新できます。

ページのメイン コンテンツ領域に ng-view を使用することを検討してください。

非常によく似たレイアウトが議論されているhttps://stackoverflow.com/a/14619122/215945も参照してください。その SO 投稿では、アイテム数を含むショッピング バスケットがヘッダーにあります。項目数は複数のコントローラーで更新する必要があったため、サービスに入れました。

于 2013-04-17T16:29:57.593 に答える
3

私の理解が正しければ、コントローラーが同じモデル データを共有できるようにする目的でscope.data = {searchHeaderDisplay: false}、2 つのコントローラーの親コントローラーを設定しました。それは大丈夫です。MainCtrlMainCtrl

data.searchHeaderDisplayあなたのコードを見なくても、問題はng-clickをオンにする方法にあると思います。親スコープ レベルに値を割り当てる必要があるときにdata.searchHeaderDisplay、子スコープ レベル (つまり、コントローラーに対応するスコープ) で設定した可能性があります。MainCtrl詳しく説明する必要がある場合はお知らせください。

アップデート：

提供されたコードを調べた後、問題は確かに私が以前に疑ったものです（上記）。

mainProductSearch()変更する必要があるものです。の代わりに、先ほど簡単に説明した理由でscope.data.searchHeaderVisible = true;必要です。scope.$parent.data.searchHeaderVisible = true背後にある理論的根拠がまだ明確でない場合は、おそらくAngularJS スコープ (および/または一般的な Javascript オブジェクト) のプロトタイプの継承チェーンに慣れる必要があります。プロトタイプの継承のスコープは、AngularJS の重要な部分です。これはトピックに関する素晴らしい記事です。

于 2013-04-17T00:21:00.920 に答える