api呼び出しの$ scope変数が時々更新されない

Question

ユーザーが外部APIに正常にログインした後にデータを表示しようとしています。

ログインすると、ページを更新するまでデータが正しく更新されないことがあります。さらに、このバグはフルリフレッシュ後も持続するようですが、私はAPIからログアウトしました。

サービスは、このようなものです：

angular.module('myApp') 
    .service('PlayerAPICall', function ($http, $q) { 
    // AngularJS will instantiate a singleton by calling "new" on this function 
    var deferred = $q.defer(); 

    return { 
     getPlayerInfo: function() { 
     var getPlayerBasic = { 
      method: 'GET', 
      url: 'API_URL', 
      headers: { 
      'Accept': 'HEADER' 
      } 
     }; 

     // This API call returns some basic player information for the current logged in user. 
     $http(getPlayerBasic).success(function(response) { 
      deferred.resolve(response); 
     }); 

     return deferred.promise; 
     }, 
    } 
    }); 

このための私のディレクティブは、（適切な情報では）このように、このような

angular.module('myApp') 
    .controller('NavbarCtrl', function($scope, PlayerAPICall) { 

    // Declare $scope objects. 
    $scope.playerBasic; 

    PlayerAPICall.getPlayerInfo().then(function(response) { 
     $scope.playerBasic = response; 
    }); 

    }) 

部分的なルックスです：

<div class='links-container'> 
    <div class='row'> 
     <div class='inputs'> 
     <form ng-submit='submit()'> 
     <p ng-show='playerBasic.first_name != null' class='md-text logout-container'> 
      Hello, {{playerBasic.first_name}} 
      <span class='logout-span'><button class='btn btn-primary logout-btn' type='submit' ng-model='submit'>Logout</button></span></p> 
     <p ng-show='playerBasic.first_name == null' class='md-text logout-container'> 
      Hello, {{playerBasic.email}} 
      <span class='logout-span'><button class='btn btn-primary logout-btn' type='submit' ng-model='submit'>Logout</button></span> 
     </p> 
     </form> 
     </div> 
    </div> 

私はこの変数にname変数が存在することを知っていますが、時々こう言います：

'Hello、' 'Hello、name'の代わりに。

$スコープが変更されない理由は完全にわかりません。

Answer 1

$q.defer()との約束を製造する必要はありません$ HTTPサービスがすでに約束返すよう：

angular.module('myApp') 
    .service('PlayerAPICall', function ($http, $q) { 
    //var deferred = $q.defer(); 

    return { 
     getPlayerInfo: function() { 
     var getPlayerBasic = { 
      method: 'GET', 
      url: 'API_URL', 
      headers: { 
      'Accept': 'HEADER' 
      } 
     }; 

     //$http(getPlayerBasic).success(function(response) { 
     // deferred.resolve(response); 
     //}); 
     //return deferred.promise; 

     var promise = $http(getPlayerBasic); 
     var derivedPromise = promise.then(function(response) { 
      //return data to chain 
      return response.data; 
     }); 
     return derivedPromise; 
     }, 
    } 

を}）;

上記の例では、成功した場合にレスポンスオブジェクトのdataプロパティで解決する約束を作成します。エラーは、誤った応答の応答オブジェクトで拒否されます。

このように約束を導く利点は、エラーがあれば約束が破られないことです。 $q.defer()への拒否を提供できないと、エラーが発生したときに約束した$q.deferが発生し、メモリリークが発生します。

Answer 2

deferオブジェクトを再利用できないため、deferredの作成を関数呼び出しに移動する必要があります。

return { 
    getPlayerInfo: function() { 
    var getPlayerBasic = { 
     method: 'GET', 
     url: 'API_URL', 
     headers: { 
     'Accept': 'HEADER' 
     } 
    }; 

    var promise = $http(getPlayerBasic); 
    var derivedPromise = promise.then(function(response) { 
     return response.data; 
    }); 
    return derivedPromise; 
    }, 
} 

$httpが約束自体を返しますので、あなたの実装が冗長であるため、またしても新たな約束を作成する必要はありません。あなただけ行うことができます：return $http(getPlayerBasic);