サービスからのデータは更新されていません

Question

私はAngularJSとプログラミングの面白いこともありますので、あなたにとっては簡単な質問ですが、時間をかけて苦労しています。

私の目標は簡単です。私のアプリ（ウェブページ）にfacebookのログインがあるように、私はCiul angular-facebook moduleを使っていますが、これは実際には動作しますが、私が望む方法ではありません。ユーザーのログに名前と写真を表示したいときは、手動でページをリロードする必要があります。また、私はlocalStorageに記録されたユーザーを保存しています（OK）。

ログイン後、データが更新されないという問題があります。私のHTMLコードでは、コントローラやサービスからそれらを呼び出そうとしましたが、どちらも古いデータがあり、ページをリロードせずに更新する方法がわかりません。最も興味深いのは、単純な変数で試してみると、魅力的なものです。ここで

は

ここ

app.factory('mainService', ['$window', '$location', '$route', '$filter', 'Facebook', function (win, $location, $route, $filter, Facebook) { 

    var scope = { 
     fbLogin: false, 
     fbUid: 0, 
     fbAccessToken: 0, 
     vkLogin: false 
    }; 

    var user = {}; 
    if(localStorage.getItem('user') != null) { 
     user = JSON.parse(localStorage.getItem('user')); 
    } else { 
     user = null; 
    } 

    return { 
     scope : scope, 
     user : user, 
     fbLogin : function() { 
      Facebook.login(function (response) { 
       scope.fbLogin = response.status; 
       scope.fbAccessToken = response.authResponse.accessToken; 
       scope.Uid = response.authResponse.userID; 

       Facebook.api('/me?fields=id,name,email,picture', function (response) { 
        localStorage.setItem('user', JSON.stringify(response)); 
       }); 

      }); 
      console.log('setting user'); 
       user = JSON.parse(localStorage.getItem('user')); 
     }, 
     fbLogout : function() { 
      Facebook.logout(function (response) { 

      }); 
      user = null; 
      localStorage.removeItem('user'); 
     }, 
     removeAuth : function() { 
      Facebook.api({ 
       method: 'Auth.revokeAuthorization' 
      }, function (response) { 
       Facebook.getLoginStatus(function (response) { 
        scope.fbLogin = response.status; 
       }); 
      }); 
     } 
    }; 


}]); 

は私のコントローラである私のサービスである

app.controller('IndexController', ['$scope', '$location', '$http', 'mainService', function ($scope, $location, $http, mainService) { 

$scope.ms = mainService; 

$scope.user = mainService.user; 

$http({ 
    method: 'GET', 
    url: 'backend/api/v1/getItems.php', 
    headers: { "Content-Type": 'text/json; charset="utf-8"' } 
}) 
    .success(function(data, status) { 
     //alert("status is : "+status); 
     if(status === 200) { 
      $scope.items = data; 
     } 
    }) 
    .error(function(data, status) { 
     $scope.items = []; 
    }); 

}]); 

呼び出すログイン機能< LI> <のhref = "＃/" NGクリック= "ms.fbLogin（ ） "> Facebookでログインしてください

データをhtmlで呼び出す{{user.name}}または{{ms.user.name}}

ログアウト時にも同じ問題が発生します。

Answer 1

こんにちは、これは正確な問題だとは言い切れませんが、これまで見たことから、実際にはかなり良いです。

私が見つけた問題は1つのみであり、理解するオブジェクトが参照によって変数にバインドされていることです。それが何を意味するのかわからない場合、私はそれがJavaScriptの基本的な部分であるので、最初にいくつかの研究を行うと言うでしょう。

ここで問題と思われることは、サービス内の空のオブジェクトに「ユーザー」を設定していることです。あなたのコントローラでは、$ scope.userをその同じオブジェクトに空に割り当てます。

ログイン機能では、ストレージから新しいJSONにユーザーを割り当てています。まず、ローカルストアを設定した直後に、これは成功コールバック内にある必要があります。

私はそのモジュールに慣れていませんが、それらは非同期関数であると仮定します。したがって、ローカルストレージデータが設定される前にそれを取得しています。

また、 'user'を新しいオブジェクトに設定すると、サービス内の値は更新されましたが、コントローラのではなくになります。

サービスの 'user'はの新しいオブジェクトを指していますが、$ scope.userはまだの元の空のオブジェクトを指しています。

あなたは2つのことを行うことができます。この問題を解決するには、次の新しいデータに$のscope.userを再割り当てするよう

は異なり、コールバックを処理します。

またはのオブジェクト参照の可能性があります。

ほとんどのコードを同じように保つことができますが、サービスでは、データを 'user'に割り当てる代わりに、ユーザのプロパティに割り当てます。

Facebook.api('/me?fields=id,name,email,picture', function (response) { 
    localStorage.setItem('user', JSON.stringify(response)); 
    user.data = response; 
}); 

サービスとコントローラの両方が同じオブジェクトを参照しているので、あなたは、$ scope.userにその新しいデータプロパティにアクセスする必要があります。

HTML：

<span>{{user.data.name}}</span>