代码之家  ›  专栏  ›  技术社区  ›  AmazingDayToday

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

  •  0
  • AmazingDayToday  · 技术社区  · 8 年前

    这是 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);
        });
    }
    

    因此,我删除一个用户,然后它与 服务 完成后,激活 activate() . 此更新 vm.users ,但不在UI中。第二次单击 delete ,但它仍然有效!

    这是怎么回事?

    1 回复  |  直到 8 年前
        1
  •  1
  •   mhodges    8 年前

    问题 :您的问题是AngularJs不知道在完成时触发摘要循环。然后()来自无角度的承诺。它只知道在父函数返回时触发它(这是即时的,因此尚未发生更改)。

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

    解决方案 :如果使用 $q 用angularjs为延期/承诺提供服务,这将解决您的问题。API几乎与 Promise 因此,您不必更改任何代码。只要换一下 new Promise(...) 到 $q(...)