Ввод значения возвращаемого auth2 в угловую переменную

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

Я использую angularJS и аутентифицирую с помощью Google auth2, чтобы получить доступ к текущему зарегистрированному пользователю. Я хочу добавить имя пользователя в переменную angularJS, просто чтобы отобразить ее на странице (пока, во всяком случае).

Вот мой соответствующий html:

<meta name="google-signin-client_id" content="(((cut out my client id here))">
<script src="bower_components/angular/angular.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<body ng-app="CalendarApp" >
  <div class="container" ng-controller="CalendarCtrl">
    <div class="header well" >
      <h1> Some heading </h1>
      <p id="welcometext"> Welcome, {{userName}} </p>
    </div>
  </div>
</body>

и соответствующие js здесь:

var myApp = angular.module('CalendarApp', []);
myApp.controller('CalendarCtrl', ['$scope', function($scope) {
$scope.userName = "tst";

gapi.load('auth2', function() {
  auth2 = gapi.auth2.init({
    fetch_basic_profile: true,
    scope: 'profile'
  });

  // Sign the user in, and then retrieve their ID.
  auth2.signIn().then(function() {
    var profile = auth2.currentUser.get().getBasicProfile();
    $("#welcometext").text("Welcome, " + profile.getName()); //this is my current workaround, but don't like it.
    $scope.userName = profile.getName();
    console.log($scope.userName); //this prints the correct name
  });
}); // gapi.load

Как вы можете извлечь из моих комментариев, вызов auth работает и извлекает данные. Я хочу получить доступ к нему из углового $scope.userName. Но если я покажу его на сайте, он отображает только «tst» и игнорирует $scope.userName = profile.getName();утверждение.

Я почти уверен, что это может быть просто тупой ошибкой с моей стороны, но я тратил на нее столько времени.

Цените любую помощь, спасибо!

javascript,angularjs,google-oauth2,

0

Ответов: 2

0 принят

Чтобы преобразовать auth2.signIn()обещание в $qсервисное обещание, интегрированное с циклом дайджеста AngularJS, используйте $q.when:

gapi.load('auth2', function() {
  auth2 = gapi.auth2.init({
    fetch_basic_profile: true,
    scope: 'profile'
  });

  // Sign the user in, and then retrieve their ID.
  //auth2.signIn().then(function() {
  //USE $q.when to integrate with AngularJS digest cycle
  $q.when(auth2.signIn()).then(function() {
    var profile = auth2.currentUser.get().getBasicProfile();
    //$("#welcometext").text("Welcome, " + profile.getName()); //this is my current workaround, but don't like it.
    $scope.userName = profile.getName();
    console.log($scope.userName); //this prints the correct name
  });
}); // gapi.load

Преобразуя gapiобещание в $qсервисное обещание, структура AngularJS будет реагировать на изменения в $ scope по .thenметоду.

Из Документов:

$ q.when

Обертывает объект, который может быть значением или (стороннее), а затем может обещать $qобещание. Это полезно, когда вы имеете дело с объектом, который может или не может быть обещанием, или если обещание исходит от источника, которому нельзя доверять.

- AngularJS $ q Service API Reference - $ q.when

0

Вам не нужно это делать:

$("#welcometext").text("Welcome, " + profile.getName()); //this is my current workaround, but don't like

Все, что вам нужно сделать, это следующее:

$scope.userName = profile.getName();

Если удаление jQuery все еще не работает,

напишите:

$scope.userName = profile.getName();
$timeout(function() {
   $scope.$apply();
});

Бхарат.

JavaScript, angularjs, Google-oauth2,
Похожие вопросы
Яндекс.Метрика