1

私のAngularアプリが最初に読み込まれるとき、かなり大きなデータに対していくつかのリクエストを行う必要があります。このデータは、ページの表示方法を決定するためにコントローラーとサービスで使用されます。リクエストが返される前にコントローラーとサービスがこのデータにアクセスしようとしているため、あらゆる種類のJavaScriptエラーが発生します。

HTMLページでは、この非同期データにバインドでき、リクエストが戻ったときにAngularがデータを入力することを知っています。ただし、このデータに基づいて、コントローラーとサービスで非常に複雑なロジックが発生しています。ですから、2つの質問があると思います。

  1. とにかく、コントローラーとサービスで非同期データを操作する方法はありますか？
  2. データが返されるまでAngularがページをレンダリングしようとするのを防ぐ方法はありますか？これは基本的にデータリクエストを同期させます、そして私はそれで大丈夫です。これは、最初の完全なHTMLページのロード時にのみ発生します。

これを示すjsFiddleでの私の試みは、ここで見つけることができます：http: //jsfiddle.net/sES9T/

4

2 に答える 2

3

基本的なフローは次のようになります。コントローラー関数内で $http リクエストを作成し、success() コールバックで、必要に応じて $scope 変数を設定します。あなたの流れはそれとは異なりますか？

また、ng-showディレクティブを使用して、必要なデータがスコープに含まれるまで DOM 要素を非表示にします。

コントローラーは次のようになります。

MyCtrl = ( $scope, $http ) ->
  promise = $http.get "/url"
  promise.success ( data ) ->
    $scope.foo = data

ビューは次のようになります。

div(ng-show="foo")
  p Here is my data, and some other stuff
  p {{ foo }}

編集

ここでjsfiddleを変更しました：

http://jsfiddle.net/sES9T/4/

期待どおりに動作します。問題は、未定義の変数のプロパティにアクセスしようとしていて、エラーが発生していたことです。また、3 回目のテストでは、変数の名前が間違っていましたが、正しい名前が付けられているかどうかを確認する必要があります。

if ステートメントは、次のように存在 (?) 演算子を使用してより簡潔にすることができるため、coffeescript をお勧めします。

myLargeData?.data

そのコードは、上記で手動で行ったように、そのプロパティにアクセスしようとする前に、myLargeData が定義されていて null でないかどうかを確認します。それが undefined または null の場合、エラーを引き起こす代わりに undefined を返します。

于 2012-08-31T18:11:30.677 に答える
0

resolve必要なすべてのデータをロードして処理するには、ルーターを使用することをお勧めします。コントローラーは、すべての解決が実際に解決された場合にのみ実行されます。したがって、リクエストが完了してデータが処理されるまで、ビューはまったくレンダリングされません。これはよりエレガントで推奨されるアプローチだと思います。

また、すべてのデータの読み込みと処理のロジックを別のサービスに抽出し、解決からサービスに作業を中継する必要があります。サービスは、すべての処理が完了すると解決される promise オブジェクトを返す必要があります。

$routeProvider (「解決」プロパティ)のドキュメントを参照してください。

于 2015-04-27T16:08:25.717 に答える