6

3 つのビュー (実際には 3 つのディレクティブ) を表示する AngularJS シングルページ アプリがあります。私の質問を説明するために、私の UI が GMail の UI と同じで、私の 3 つのビューが次のとおりであると仮定しましょう。

  • ナビゲーション ペイン(左) -- GMail では、「受信トレイ」、「下書き」などのフォルダが表示されます。
  • ツールバー(右上) -- GMail がボタンを表示する場所
  • コンテンツ ペイン(右下) -- GMail がメッセージを表示する場所

これら 3 つのビューは、パスが変更されるたびに更新する必要があります。例えば：

  • ナビゲーション ウィンドウでは、特定の項目を強調表示する必要があります。
  • ツールバーは、特定のボタンを表示/非表示にする必要があります。
  • コンテンツ ペインは、サーバーから特定のデータを読み込んで表示する必要があります。

AngularJS でこれを行う最善の方法は何ですか?

これまでのところ、私は持っています：

  1. $routeProvider.when()の使用を除外しました。3 つのビューを更新する必要があり、$routeProviderサポートされるのは 1 つだけだからngViewです。
  2. 現在のパスを監視し、$rootScope.$broadcast()を使用してパスが変更されたことをコントローラーに警告するSERVICEを作成しました。
  3. (または、#2 の代わりに) #2と同じことを行うコントローラーを作成しました。
  4. $scope.$on()を使用して #2 または #3 によってブロードキャストされたイベントをキャッチしました (これはビュー コントローラーで行います)。

この種の作品ですが、いくつかの問題があります。

  • 「パス変更」イベントは、特に最初のページ読み込み時に、イベント リスナーが配置される前にブロードキャストされることがよくあります。これはおそらく、ビュー テンプレートがサーバーから読み込まれ、テンプレートの読み込みが完了する前にリスナーを設定できないことが原因です。
  • AngularJS でパスの変更を監視するためのより効率的/自動化された方法はありませんか? （以下の私のコードを参照してください。かなり「手動」のようです。）
  • パスの変更を監視するコードは、SERVICE または CONTROLLER に属しますか? （コントローラーはビューに動作を追加するためのものなので、サービスに傾倒します。）
  • ビューが「パス変更」イベントをキャッチすることを保証するにはどうすればよいですか? そもそもイベントを使用する必要がありますか? (たぶん、パスをサービスに保存し、代わりにビューにサービスを監視させることができますか?)

パスの変更を監視するコード (これをサービスまたはコントローラーに入れます):

var watchExpression = function() { return $location.path(); };
var listener = function(newPath, oldPath) {
    // Broadcast event on $rootScope
    $rootScope.$broadcast('PathChanged', newPath);
};
$rootScope.$watch(watchExpression, listener);

次に、View Controller でイベントをキャッチします。

$scope.$on('PathChanged', function(event, path) {
    // Update view based on new path.
});

どんな助けでも感謝します。ありがとう。

4

1 に答える 1

5

最終バージョンは locationChangeSuccess で問題ないように見えますが、これを読んでいる他の人にとっては、 $routeProvider をすぐに除外したと思います。パスとともに変化するメイン コンテンツ ペイン用に 1 つの ng-view を作成し、ナビゲーション ペインとツールバー用に他の独立した (「静的」) コントローラ/テンプレートを作成できます。

次に、これらの他の 2 つのコントローラーでルートの変更をリッスンします。

$rootScope.$on('$routeChangeSuccess', function(evt, cur, prev) {
    ...do what you have to do here, maybe set a $rootScope.path as you did
})

すべてネイティブの Angular 機能を使用しています。私は実際にAngular を使用して構築した Web サイトhttp://provok.inでこれを行い、同様のレイアウトを持っています (まあ、正確ではありませんが、「静的」セクションとメインコンテンツの ng-view を動的に持っています) routeProvider によって、パスに基づいて更新されます)。

于 2012-08-11T00:42:45.340 に答える