getコールに設定した後に変数が未定義のまま残っています

Question

私はAngularJSとMEANスタックを使って開発する方法を学習しようとしています。私は非常に初心者の開発者なので、これは知識の問題の欠如かもしれません。

したがって、私は$ getScreen.sprintStart $ rootScope.sprintStart $ rootScope.taskPopAgain $ rootScope.taskPopAgainを事前に設定していますが、get呼び出しで値を格納しようとした後に変数を設定しようとしています。 get呼び出し中にconsole.logを実行すると、値が期待どおりに戻ってくるので、get呼び出し後の次の行は値がなくなったことになります。私はここで間違って何をしていますか？

api/tasksから来る値は、オブジェクトを含む配列であり、api/sprintモデルは1つのオブジェクトを送信する必要があります。

変数をクリーンアップして単純化することができますが、現状の状況を視覚化するのに役立ちます。もう一度、私は初心者です。

助けてくれてありがとう！

'use strict'; 
 

 
angular.module('inBucktApp') 
 
    .service('VariableService', function() { 
 
    // AngularJS will instantiate a singleton by calling "new" on this function 
 
     var ticketId = 'noTicketYet'; 
 
     var ticketAssigneeName = 'noTicketNameYet'; 
 

 
     return { 
 
      getPropertyId: function() { 
 
       return ticketId; 
 

 
      }, 
 
      getPropertyName: function() { 
 
       return ticketAssigneeName; 
 

 
      } 
 
      , 
 
      setProperty: function(value, valueName) { 
 
       ticketId = value; 
 
       ticketAssigneeName = valueName; 
 
      } 
 
     }; 
 
     }) 
 
    .run(['$rootScope', '$http', 'socket', 'VariableService', function($rootScope, $http, socket, VariableService) { 
 

 

 
     $rootScope.sprintStart; 
 
     $rootScope.taskPopAgain; 
 

 
     $http.get('/api/sprints').success(function(sprints) { 
 

 
      $rootScope.sprints = sprints.pop(); 
 

 
      $rootScope.sprintStart = new Date($rootScope.sprints.start); 
 
      $rootScope.sprintEnd = new Date($rootScope.sprints.end); 
 

 
      console.log($rootScope.sprintStart) 
 

 
      socket.syncUpdates('sprints', $rootScope.sprints); 
 
     }); 
 

 
     $http.get('/api/tasks').success(function(task) { 
 
      $rootScope.task = task; 
 
      $rootScope.taskPop = _.flatten($rootScope.task); 
 
      $rootScope.taskPopAgain = $rootScope.taskPop.pop(); 
 
      console.log($rootScope.task); 
 
      // console.log($rootScope.taskPop); 
 
      console.log($rootScope.taskPopAgain.start); 
 
      console.log($rootScope.taskPopAgain); 
 
      socket.syncUpdates('task', $rootScope.task); 
 
     }); 
 

 
     //coming up as undefined now, so function below doesnt work. 
 
     console.log($rootScope.taskPopAgain); 
 
     console.log($rootScope.sprintStart);

Answer 1

これは初心者のための共通の問題です。 $httpメソッドが非同期であるという考え方がありません。 console.logへの呼び出しは、$httpメソッドの実行が終了する前に発生しています。 successメソッドの中では、すべてを正しく行っていますが、その頃にはconsole.logメッセージが既に実行されています。デバッガであなたのアプリケーションを実行すると、これは本当であることがわかります。

// step 1: this code executes 
    $http.get('/api/tasks').success(function(task) { 
     //step 3: finally this, when the api responds 
     $rootScope.task = task; 
     $rootScope.taskPop = _.flatten($rootScope.task); 
     $rootScope.taskPopAgain = $rootScope.taskPop.pop(); 
     console.log($rootScope.task); 
     // console.log($rootScope.taskPop); 
     console.log($rootScope.taskPopAgain.start); 
     console.log($rootScope.taskPopAgain); 
     socket.syncUpdates('task', $rootScope.task); 
    }); 

    //step 2: then this 
    //coming up as undefined now, so function below doesnt work. 
    console.log($rootScope.taskPopAgain); 
    console.log($rootScope.sprintStart); 

あなたが$http呼び出し、下部にはconsole.logの呼び出しにブレークポイントを置いて、そして成功メソッド内1場合は、実行の順序は、あなたが期待したものではありませんが表示されます。

したがって、$httpコールから返されたデータを元にしたいことは、内線成功呼び出しを行う必要があります。

あなたはこのように気にいらないのだろう、あなたの問題を解決するには、次の

$http.get('/api/tasks').success(function(task) { 
    $rootScope.task = task; 
    $rootScope.taskPop = _.flatten($rootScope.task); 
    $rootScope.taskPopAgain = $rootScope.taskPop.pop(); 
    myFunction(); 
}); 

function myFunction() { 
    // do something with here 
    console.log($rootScope.taskPropAgain); // this will not be undefined 
}