Question

我一直在使用Kinvey HTML5库来尝试构建一个使用Google身份登录的客户端应用程序。就Oauth事务而言，一切似乎都很好，但是我试图使用scope参数切换我的登录按钮的可见性，并且在回调中使用Kinvey connect方法，Angular似乎没有检测变化。

服务：

  connect: function(successFn, failureFn) {
    return Kinvey.Social.connect(null, 'google',
      {
        success: successFn,
        failure: failureFn
      });
  }

登录链接的指令：

    $scope.login = function() {
      Login
        .connect(function(response) {
          $scope.loggedIn = true;
        },
        function(response) {
        });
    }

指令模板：

<div>
  <button ng-hide="loggedIn" type="button" class="btn" ng-click="login()">Login with Google ({{loggedIn}})</button>
  <div class="btn-group btn-small" ng-show="loggedIn">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
      Hello, {{user.socialData.name}} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/profile">My Profile</a></li>
      <li><a href="/performance">My Performance</a></li>
      <li class="divider"></li>
      <li><a href="/logout" ng-click="logout()">Log Out</a></li>
    </ul>
 </div>
</div>

目标是切换登录按钮的可见性与下拉列表的可见性。我认为没有理由为什么我所做的不应该工作。即使使用$timeout来模拟loggedIn值的更改也会产生正确的行为。

Answer 1

当外部Kinvey.Social服务返回时，需要通知Angular，以便触发$ digest循环。这可以使用$scope

的$apply()函数完成

$scope.login = function() {
  Login
    .connect(function(response) {
      $scope.$apply(function() { $scope.loggedIn = true; });
    },
    function(response) {
    });
}

当使用angular自己的$http服务时，它会为你处理这个问题，但是当使用外部的东西时，这就是angular知道如何运行一个脏的检查周期，它应该触发你正在使用的ng-show指令。 / p>

使用Kinvey.Social登录Angular App和Promise API

1 个答案: