CODEWITHSUNDEEP
angularjs
user2954587
user2954587

Reputation: 4861

Angular Scope not updating

I'm using facebook login am having trouble properly setting $scope.user. It is not being set automatically on the callback but only once I click something else on the page. I'm sure it's something simple I'm missing but could use some help.

My HTML

 <nav class="navbar navbar-default navbar-fixed-top" 
    role="navigation" ng-controller="HomeCtrl">
      <p class="navbar-text pull-right"> 
        {{ user.name }} 
      </p> 
      <button 
        class="btn btn-default navbar-btn navbar-right" 
        ng-hide="user"
        ng-click="login()">Log In With Facebook
      </button>
  </nav>

HomeCtrl: 

 .controller('HomeCtrl', function($scope) {
    $scope.user;

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    $scope.login = function() {
      FB.login(function(response) {
        if (response.status === 'connected') {
          FB.api('/me', function(response) {
            console.log(response);
            $scope.user = response;
          });
        } 
      }, {scope: 'public_profile,email,user_friends'} );
    }
  })

If I run console.log($scope.user) after I set it to the response, it seems as though $scope.user is being set, however, it's not reflected in the HTML until after another element is clicked.

Upvotes: 1

Views: 130

Answers (1)

JB Nizet
JB Nizet

Reputation: 691635

The facebook login callback is not executed by angular. So angular doesn't have any way to know that it modified the scope, and that it has to reevaluate the expressions used in the HTML page.

You thus need to tell angular that something has changed in the scope:

      FB.api('/me', function(response) {
        console.log(response);
        $scope.$apply(function() {
            $scope.user = response;
        });
      });

Upvotes: 3

Related Questions