Angularjsはデータ準備完了時に応答します

Question

私は最初の角度アプリを.Netバックエンドで開発しています。

http.postを使用してWebメソッドから非同期のデータを取得します。それはすべて正常に動作します。 クライアントサイド私はいくつかの簡単な計算をしたいと思います（テーブル内のすべてのデータの合計を含むテーブルの最終行）

これを行うコードはかなりストレートですが、私の問題はデータではありません私がそれをやろうとすると準備ができている。

私は約束とサービスまたは工場を使用することができると私は読んだ。しかし私は、私たちが行く最善の方法であるかどうかはわかりません。ビューのための

マイコード：

<div ng-controller="taskCtrl as ctrl"> 
<div class="col-md-10 container outer"> 
<h1 class="center-block">{{ctrl.SprintViewModel.SprintName}}</h1> 
    <table id="SprintMetaDate"> 
     <tr><td>Projekt:</td><td>{{ctrl.SprintViewModel.ProjektName}}</td></tr> 
     <tr><td>Periode:</td><td>{{ctrl.SprintViewModel.StartDate}} - {{Ctrl.SprintViewModel.EndDate}}</td></tr> 
     <tr><td>Udarbejdet af/d:</td><td>{{ctrl.SprintViewModel.MadeBy}}</td></tr> 
    </table> 

    <h3>Sprint Resume:</h3> 
    <br/> 
    {{ctrl.SprintViewModel.SprintResume}} 
    <h3>Sprint afslutning:</h3> 
    {{ctrl.SprintViewModel.SprintDemo}} 

    <h2>Scope og Økonomi </h2> 
    <h3>Sprint Opgaver</h3> 


    <table id="SprintTasks" class="col-md-12"> 
     <tr><th>Opgave</th><th>Estimat</th><th>Forbrug</th><th>Udest.</th><th>*</th><th>Pris (DKK)</th></tr> 
     <tr ng-repeat="x in ctrl.SprintViewModel.Tasks"> 
      <td style="width: 40%">{{ x.Description }}</td> 
      <td>{{ x.TimeEst }}</td> 
      <td>{{ x.TimeUsed }}</td> 
      <td>{{ x.TimeRemaining }}</td> 
      <td>{{ ctrl.CalcPrecisionOfEstimat(x.TimeUsed,x.TimeRemaining,x.TimeEst) | number:2}} %</td> 
      <td>{{x.Price}}</td> 
     </tr> 
     <tr> 
      <td>Ialt</td> 
      <td>{{ ctrl.TotalEstimat() }}</td> 
      <td>{{ ctrl.TotalTimeUsed() }}</td> 
      <td>{{ctrl.TotalTimeRemaining()}}</td> 
      <td>{{ctrl.TotalPrecision()}}</td> 
      <td>{{ctrl.TotalPrice()}}</td> 
     </tr> 
    </table> 
     * Forbrug + Udestående i forhold til estimat 

    <br/> 

    Udestående opgaver er planlagt ind i næstkommende sprint. 
    </div> 


</div> 
</form> 
<script> 
    var app = angular.module('myApp', []); 
    app.controller('taskCtrl', function($scope, $http) { 
     var ctrl = this; 
     ctrl.SprintViewModel = null; 


     ctrl.TotalEstimat=function() { 
      var totalEstimat=0; 
      for (i=0; i<ctrl.SprintViewModel.Tasks.count;i++) { 
       totalEstimat += ctrl.SprintViewModel.Tasks[i].Estimate; 
      } 
      return totalEstimat; 
     } 


     ctrl.TotalPrecision = function() { 
      var totalPrecision=0; 
      angular.forEach(ctrl.SprintViewModel.Tasks, function (value, key) { 
       totalPrecision += Number(value); 


      }); 

     $http.post('SprintRapport.aspx/GetSprintViewModel', {}) 
      .then(function(response, status, headers, config) { 
       console.log("I success"); 
       ctrl.SprintViewModel = response.data.d;     
      });   
    });` 

は、すでに述べたように、最後の行のすべてのメソッドの際にページの読み込みctrl.SprintviewModelが定義されていないので、私は、nullreferenceごとを得る言及しました。私は単純化のためにメソッドの1つだけを含んでいます、問題はそれらのすべてのために同じです。

私の質問は、ctrl.TotalEstimat（）が最初に呼び出され、ctrl.SprintViewModelが割り当てられていることを確認する方法です。

Answer 1

最後の<tr>にng-ifの条件を追加することができます。この条件は、データがコントローラに入力される準備が整った時点で真となります。したがって、最初に$scope.loading = falseを定義することができます。そして、あなたのコードにあなたが$scope.loading=trueを設定する準備ができたら、それは内部的に$ digestサイクルを呼び出し、あなたのビューは更新されます。

Answer 2

あなたができることはいくつかあります。私はこの種の問題を、関数にガード条件を置くことで解決しました。これらは、続行する前に必要な変数が設定されていることを確認します。以下のように関数の先頭にif (!ctrl.SprintViewModel) return;を追加：

ctrl.TotalEstimat=function() { 
     // Guard Condition to prevent function executing in invalid state. 
     if (!ctrl.SprintViewModel) return; 

     var totalEstimat=0; 
     for (i=0; i<ctrl.SprintViewModel.Tasks.count;i++) { 
      totalEstimat += ctrl.SprintViewModel.Tasks[i].Estimate; 
     } 
     return totalEstimat; 
    } 

は、それは別のオプションですが、あなたはすでにをほのめかしてきたように、私は約束と$qライブラリは、この種の問題を解決するために適切角度の方法であると思います物の