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

这是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的第二次单击上，它可以工作！

这里发生了什么？

最佳答案

问题：您的问题是，AngularJs不知道在非角度承诺中完成.then（）后触发摘要循环。它只知道在父函数返回时触发它（这是立即的，因此尚未发生任何更改）。

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

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

关于javascript - 仅在第二次尝试后，UI不会立即更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48896050/