在promise.then()中分配时Angular不更新绑定

Question

在我的角度的应用程序,我有一个$scope变量user带name.

如果我在点击时将此变量设置为"test":

<a href="#" ng-click="setUser()">Set User</a>

与功能

$scope.user = {
  name: 'blank'
}

$scope.setUser = function(name) {
  $scope.user.name = name
}

这很好用.但是,如果我在promise.then()*中设置它,它似乎正确设置变量,但Angular不会在视图中更新它,直到我在$ scope.user上执行了另一个操作.

<a href="#" ng-click="startLogin()">Set User</a>

现在调用一个新函数, startLogin()

$scope.user = {
  name: 'blank';
};

$scope.setUser = function(name) {
  $scope.user.name = name;
};

$scope.startLogin = function() {
  var promise = Kinvey.ping();
  promise.then(function(response) {
    console.log('success');
    $scope.setUser('test');
  });
};

这样做之后.{{user.name}}视图中的字段仍为"空白".我还测试了以下内容:

• $scope 当我将它记录到控制台时,它在函数中运行良好.
• 记录$scope.user返回也正确,表明变量已更改.
• 有趣的是,视图最终在我第二次点击时发生了变化.
• 我也可以通过添加$scope.$apply()来解决这个问题,但这似乎是解决这个问题的错误方法.

*我正在使用Kinvey,它使用与CommonJS的promise.then()类似或相同的语法

Answer 1

双向绑定在角度摘要周期期间得到更新.这些循环由绑定到指令的DOM事件或参与Angular生态系统的其他实体触发.

因此,Angular提供的"魔力"只是自动触发该摘要周期.您可以使用以下命令触发摘要周期$scope.apply:

promise.then(function(response) {
  $scope.$apply(function() {
     console.log('success');
     $scope.setUser('test');
  });
});

这是处理第三方库时的推荐方法.