서비스의 데이터가 업데이트되지 않았습니다.

Question

저는 AngularJS와 프로그래밍에있어 매우 새롭기 때문에 쉽게 질문 할 수 있습니다. 그러나 많은 시간 동안 고민하고 있으며 제 생각을 제대로 이해하지 못합니다.

그래서 내 목표는 간단합니다. 내 앱 (웹 페이지)에 페이스 북 로그인을 사용하려면 Ciul angular-facebook module을 사용하고 있습니다. 실제로는 작동하지만 원하는 방식대로 작동하지 않습니다. 사용자 loggs 나는 그의 이름과 사진을 보여주고 싶지만 지금 수동으로 페이지를 다시로드해야합니다. 또한 localStorage에 로그인 한 사용자를 저장하고 있습니다 (제대로 작동합니다).

문제는 로그인 한 후 데이터가 업데이트되지 않는다는 것입니다. 내 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 = []; 
    }); 

}]); 

호출 로그인 기능 < 리> < A HREF = "# /"NG 클릭 = "ms.fbLogin () "> Facebook을 사용하여 로그인

데이터를 {{user.name}} 또는 {{ms.user.name}}

글쎄, 같은 문제는 로그 아웃에도 있습니다.

Answer 1

안녕하세요, 제게 이것이 정확한 문제라고 말할 수는 없지만, 당신이 지금까지 가지고있는 모든 것이 실제로는 꽤 괜찮습니다.

내가 발견 한 문제는 단지 하나 뿐이므로 이해하는 객체는 참조로 변수에 바인딩됩니다. 그게 무슨 뜻인지 모르겠다면, 자바 스크립트의 근본적인 부분이기 때문에, 먼저 그걸 연구 해보라고 말하고 싶습니다.

여기서 문제는 사용자가 서비스의 빈 개체에 '사용자'를 설정하고 있다는 것입니다. 그런 다음 컨트롤러에서 $ scope.user를 동일한 객체에 비어있게 지정합니다.

그러나 로그인 기능에서 사용자는 스토리지에서 새 JSON에 할당하고 있습니다. 첫째, localstorage를 설정 한 직후 성공 콜백 내에 있어야합니다.

저는이 모듈에 익숙하지 않지만 비동기 함수라고 가정 할 것입니다. 따라서 로컬 저장소 데이터가 설정되기도 전에 데이터를 가져오고 있습니다.

또한 'user'를 새 개체로 설정하면 서비스에서 값을 업데이트했지만 컨트롤러에서는 이 아니라이됩니다.

서비스에있는 '사용자'는 새로운 개체를 가리키고 $ scope.user는 여전히 빈 개체를 가리키고 있습니다.

당신이 두 가지 일을 할 수있는이 문제를 해결하려면 새 데이터에 $의 scope.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>