UI 不会立即更新，仅在第二次尝试后更新

Question

这是html:

<div ng-repeat="user in controller.users">
    <p>{{user.name}}</p>
    <button ng-click="controller.deleteUser(user)" value="delete"></button>
</div>

这是controller:

vm = this;
vm.users;

activate();

function activate() {
    service.getUserList().then(function(userList){
        vm.users = userList;
    });
}

function deleteUser() {
    service.deleteUser(user).then(function(){
        activate();
    });
}

这是service:

function deleteUser(user) {
    var index = userList.indexOf(user);
    if (index !== -1) userList.splice(index, 1);

    return new Promise((resolve, reject) => {
        resolve(userList);
    });
}

所以，我删除了一个用户，然后它与 service 对话，完成后，激活 activate()。这会更新 vm.users，但不会更新 UI。在第二次点击 delete 时，它仍然有效！

这是怎么回事？

Answer 1

问题：您的问题是 AngularJs 不知道在 non-angular 承诺的 .then() 完成后触发摘要循环。它只知道在父函数的 return 上触发它（这是立即的，所以还没有发生任何变化）。

旁注 - 这就是它在第二次点击时起作用的原因，因为它会立即从函数 return 触发，此时数据有从第一次点击开始改变。

解决方案：如果您在angularjs中为deferreds/promises使用$q服务，将解决您的问题。 API 几乎与 Promise 相同，因此您不必更改任何代码。只需将 new Promise(...) 更改为 $q(...)

UI 不会立即更新，仅在第二次尝试后更新

UI is not updated immediately, only after second attempt

javascript

angularjs

angular-promise