Angular Scope不更新

时间:2014-09-28 16:40:11

标签: angularjs

我使用Facebook登录时无法正确设置$scope.user。它不是在回调上自动设置,而是仅在我点击页面上的其他内容时设置。我确定它很简单,但我可以使用一些帮助。

我的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'} );
    }
  })

如果我在将其设置为响应后运行console.log($scope.user),则好像设置了$scope.user,但是,在点击另一个元素之后,它才会反映在HTML中。

1 个答案:

答案 0 :(得分:3)

facebook登录回调不是由角度执行的。因此angular没有任何方法可以知道它修改了范围,并且必须重新评估HTML页面中使用的表达式。

因此,你需要告诉角度范围内有些变化:

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