AngularJS 非同期でのデータ取得

Question

AngularJSにて掲示板に似た表現をしたいと思っています。

元データは

{
   id:(int),
   parent:(親id),
   subject:(表題),
  body:(内容)
}

見たいな感じです。

これを

{
   id:(int),
   parent:(親id),
   subject:(表題),
  body:(内容),
   children:[
        {
             id:(int),
             parent:(親id),
             subject:(表題),
            body:(内容),
             children:[
            ]
         },
         {
             id:(int),
             parent:(親id),
             subject:(表題),
            body:(内容),
             children:[
                    {
                         id:(int),
                         parent:(親id),
                         subject:(表題),
                        body:(内容),
                         children:[
                          ]
                     },
                     {
                         id:(int),
                         parent:(親id),
                         subject:(表題),
                        body:(内容),
                         children:[
                          ]
                     }
            ]
         },
         {
             id:(int),
             parent:(親id),
             subject:(表題),
            body:(内容),
             children:[
            ]
         }
   ]
}

見たいな形で取得したいと思っています。

親データを取得してから再帰処理で取得すれば良いのだと思うのですが取得後に$scopeにセットして表示させたいです。

各データの取得を非同期で行った場合、最終的なデータ取得のタイミングをどのように取れば良いのかわかりません。

具体的には$applyのタイミングがわかりません。

angularJS,javascriptなど勉強中で非同期処理に慣れていません。
どなたかご教授頂けませんか。
宜しくお願い致します。

Answer 1

ng-repeat による配列表現を基本として、これを入れ子にして定義すればよいのではないでしょうか。
例えば・・・

<div ng-show="rootArticle">
  <h3>{{rootArticle.subject}}</h3>
  <p>{{rootArticle.body}}</p>
  <div ng-repeat="c1 in rootArticle.children">
    <h3>{{c1.subject}}</h3>
    <p>{{c1.body}}</p>
    <div ng-repeat="c2 in c1.children">
      <h3>{{c2.subject}}</h3>
      <p>{{c2.body}}</p>
    </div>
  </div>
</div>

HTMLを上記のように定義しておき、コントローラー側のコードで・・・

$http.get('url-to-get-article')
  .then(function(res) {
    $scope.rootArticle = res.data;
  });

このようにすることで、ざっくりですが実現できます。
JSONデータの取得に angular 標準の $http を使っているのであれば、.then() 内部でスコープオブジェクトへの操作だけ記述すれば、$apply（実際は $digest() ）は自動的に実行されるので、タイミングを気にする必要はありません。

ご参考になれば。