角度が更新されていないサービス変数

Question

次は、名前、写真などのユーザープロファイルデータ用にMyAppのAPIにhttp要求を出して、navbarを更新するコードです。

var app = angular.module('MyApp', ['ng']); 

app.controller('navBarController', function($scope, $userProfile) { 
    $scope.userProfile = $userProfile; 
    console.log("$userProfile: " + JSON.stringify($userProfile)); 

    setTimeout(function() { 
     console.log("$userProfile: " + JSON.stringify($userProfile)); 
    }, 3000); 

}); 

app.factory('$userProfile', function($http) { 
    var profile = null; 
    $http. 
     get('/api/v1/me'). 
     success(function(data) { 
      profile = data; 
      console.log("profile after get: " + JSON.stringify(profile)); 
     }). 
     error(function(data, $status) { 
      if ($status === status.UNAUTHORISED) { 
       profile = null; 
       console.log("profile if error: " + JSON.stringify(profile)); 
      } 
     }); 

    console.log("profile (finally): " + JSON.stringify(profile)); 
    return profile; 
}); 

app.directive('navBar', function() { 
    return { 
     controller: 'navBarController', 
     templateUrl: 'templates/nav_bar.html' 
    } 
}); 

私は取得していますと、次のようにログがあり、予期しない結果をチェックするためにコンソールロギング午前：

プロファイル（最終的に）：ヌル

$ USERPROFILE：ヌル

プロフィール取得後： {"写真"： "http://localhost:3000/img/1023.jpg"、 "名前"： "Utkarsh Gupta"}

$ USERPROFILE：関数の先頭で定義されたプロファイルがnullであるので$http.get()が非同期であるとしてnull

最初の2つのログMSGのは明白です。しかし、$http.get()関数が正常に返された後、プロファイルvarは3番目のログ・メッセージに示されているように更新されましたが、$userProfileサービスは引き続きヌルになります。

Answer 1

代わりに先頭にヌルとしてプロファイルを初期化する、あなたのようにそれを初期化する必要があります。

：

var profile = {}; 

そしてその空のプロファイルオブジェクトへのタックあなたのAPIは次のようにデータを返さ

$http. get('/api/v1/me'). success(function(data) { //like this profile.data = data; }) 

コードでは、$ userProfile-service関数が終了すると、単にnullとしてプロファイルが返されます。また、$ http.get要求が完了した後でも、更新されたプロファイル変数はスコープ外であるためアクセスできなくなるため、$ userProfileは同じnullになります。しかし、のプロファイルをオブジェクトとして初期化して返すと、オブジェクトがであるため、関数が返された後でもアクセスできます。参照先はです。 $ userProfileは、上で宣言したものと同じ正確なプロファイルオブジェクトであり、nullではなく、コード全体の任意の場所にあるそのプロファイルオブジェクトの更新であるため、コントローラのプロファイルオブジェクトのコンテンツにアクセスすることができますそのオブジェクトがアクセスされているところであればどこにでも反映されます。

Answer 2

サービスがコントローラに挿入されていないようです。

あなたはそれを試しましたか？ここ

app.controller('navBarController', ["$scope", "$userProfile", function($scope, $userProfile) {}]

例：あなたのサービスで https://docs.angularjs.org/guide/services

Answer 3

は、あなたがvar profile = null;を宣言し、すぐ後にあなたがいる変数の復帰時にnullでprofileとを返す、その後$http API呼び出しをトリガーしていますAPIが応答を得た後に変数を更新し、あなたがそれを期待している場合は、コントローラに伝播しなければなりません。

サービスは、自然の中でsingletonであるため、インスタンスは一度作成され、 は作成されません/更新。

したがって、サービスを使用するためのコードはお勧めできません。私はloadというメソッドを返すサービスを返すコードを更新しました。コントローラからトリガされているAPIを呼び出すには、$scopeに応答データを直接割り当てることができます。

var app = angular.module('MyApp', ['ng']); 

app.controller('navBarController', function($scope, $userProfile) { 
    $userProfile.load(). 
     success(function(data) { 
      $scope.userProfile = data; 
      console.log("profile after get: " + JSON.stringify($scope.userProfile)); 
     }). 
     error(function(data, $status) { 
      if ($status === status.UNAUTHORISED) { 
       $scope.userProfile = null; 
       console.log("profile if error: " + JSON.stringify($scope.userProfile)); 
      } 
     }); 

}); 

app.factory('$userProfile', function($http) { 
    var getProfile = function() { 
     return $http. 
     get('/api/v1/me'); 
    }; 

    //console.log("profile (finally): " + JSON.stringify(profile)); 
    return { 
     load: getProfile 
    }; 
}); 

app.directive('navBar', function() { 
    return { 
     controller: 'navBarController', 
     templateUrl: 'templates/nav_bar.html' 
    } 
}); 

注：また、あなたはAngularJS reserveredキーワードと同じ名前を使用する場合、これはAngularJSに予約されており、 競合し得るようなサービス、変数、コントローラ名に$接頭辞を使用しないでください/サービス。

Answer 4

最初にサービスを修正する必要があります（工場出荷時）。それは戻って、反対する必要があります。今はサービス内で非同期コードを実行しているだけで、コントローラがそのコードを使用する方法はありません。次に、サービスを修正したら（下のコードを見てください）、ユーザープロファイルを取得する関数を作成する必要があります。非同期コードを扱っているので、ユーザープロファイル関数は約束を返す必要があります。再度、以下のコードを見て、それが助けてくれることを願っています。

var app = angular.module('MyApp', ['ng']); 

app.controller('navBarController', function($scope, $userProfile) { 

    $userProfile.get().then(function(response){ 
     $scope.userProfile = response; 
    }); 

    setTimeout(function() { 
     console.log("$userProfile: " + JSON.stringify($userProfile)); 
    }, 3000); 

}); 

app.factory('$userProfile', function($http) { 

    var self = {}; 

    self.get = getProfile; 

    return self; 

    function getProfile(){ 

     var profile = null; 

     return $http.get('/api/v1/me') 
      .success(function(data) { 

       return data.data; 

      }) 
      .error(function(data, $status) { 

       if ($status === status.UNAUTHORISED) 
        return profile; 

      }); 

    } 
});