javascript - 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();
    });
}

这是服务:

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

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

因此，我删除了一个用户，然后它与服务通信，完成后激活activate()。这会更新 vm.users，但不会在 UI 中更新。第二次点击删除时，它就可以工作了!

这是怎么回事？

Answer 1

问题:您的问题是 AngularJs 不知道在非 Angular promise 完成 .then() 后触发摘要周期。它只知道在从父函数返回时触发它(这是立即的，因此尚未发生任何更改)。

旁注 - 这就是为什么它在第二次单击时起作用，因为它将在函数立即返回时触发，此时数据已从第一次单击更改。

解决方案:如果您使用$q AngularJS 中的延迟/ promise 服务，这将解决您的问题。该 API 与 Promise 几乎相同，因此您不必更改任何代码。只需将 new Promise(...) 更改为 $q(...)