Данные от сервисного центра обновлены

Question

Я очень новичок в AngularJS и программирую, так что это может быть легким вопросом для вас, но я изо всех сил борюсь с ним в течение многих часов и не могу понять свое мнение прямо.

Итак, моя цель проста, иметь доступ к facebook в моем приложении (веб-страница), я использую Ciul angular-facebook module, это действительно работает, но не так, как я хочу. Когда пользовательские логги я хочу показать свое имя и фотографию, но теперь мне приходится вручную перезагружать страницу, а затем показывает, пока это не будет. Также я записываю зарегистрированного пользователя в 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 = []; 
    }); 

}]); 

Вызов функции Войти < li> < A HREF = "# /" нг-клик = "ms.fbLogin () "> Войти через Facebook

Вызов данных в html {{user.name}} или {{ms.user.name}}

Ну, та же проблема также с выходом из системы.

Answer 1

Эй, мне так сложно сказать, что это точная проблема, но из-за внешнего вида все, что у вас есть, на самом деле довольно хорошее.

Есть только одна проблема, которую я вижу, и она просто сводится к пониманию того, что объекты привязаны к переменным по ссылке. Если вы не знаете, что это значит, я бы сказал, сделайте некоторые исследования по этому поводу, так как это фундаментальная часть javascript.

Проблема в том, что вы устанавливаете «пользователь» в пустой объект в своей службе. В вашем контроллере вы назначаете $ scope.user этому же объекту пустым.

Однако в вашей функции входа вы назначаете пользователя новому JSON из хранилища. Во-первых, это также должно быть внутри обратного вызова успеха сразу после установки localstorage.

Я не знаком с этим модулем, но я собираюсь предположить, что это асинхронные функции. Поэтому вы захватываете данные локального хранилища, прежде чем он будет установлен.

Кроме того, установив «пользователь» на новый объект, вы обновили его значение в службе, но не в контроллере.

Поскольку это связано, по ссылке «пользователь» в службе теперь указывает на нового объекта, в то время как $ 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>