데이터 준비가 완료되면 Angularjs가 응답합니다.

Question

.Net 백엔드가있는 첫 번째 각도 앱을 개발하고 있습니다.

http.post를 사용하여 웹 메소드에서 비동기 데이터를 가져옵니다. 그건 모두 잘 작동합니다. 클라이언트 측 간단한 계산 (테이블의 모든 데이터의 합계를 포함하는 테이블의 마지막 행)을 수행하고 싶습니다.

코드는 꽤 직선이지만 내 문제는 데이터가 아닙니다. 내가 그것을하려고 할 때 준비.

약속과 서비스 또는 공장을 사용할 수 있음을 읽었습니다. 그러나 나는 우리가 최선의 방법이 될지 확신하지 못합니다. 뷰에 대한

내 코드 :

<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을 얻을 언급했다. 나는 단순화를위한 방법 중 하나만 포함 시켰습니다. 문제는 모두 동일한 것입니다.

그럼 내 질문은 ctrl.TotalEstimat()이 먼저 호출 된 다음 ctrl.SprintViewModel이 할당되었는지 확인하는 방법입니다.

Answer 1

조건을 마지막으로 <tr>에 추가 할 수 있습니다.이 조건은 컨트롤러에서 데이터를 채울 준비가되었을 때 true로 확인됩니다. 따라서 처음에 $scope.loading = false을 정의 할 수 있으며 코드를 채울 준비가되면 $scope.loading=true을 설정하면 내부적으로 $ digest cycle이 호출되고보기가 업데이트됩니다.

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 라이브러리는 이런 종류의 문제를 해결하기 위해 적절한 각 방법이라고 생각 사물의.