Javascript 如何在让AngularJS在更新UI之前等待的同时解决早期异步返回问题？

我有一个函数，可以在仪表板上重新加载项目列表，如下所示：

//代码在这里
有棱角的
.module（'示例'，[]））
.directive（'list'，list）
var-fooCount=3；
函数列表（$timeout，$q）{
var指令={
限制：'E'，
controllerAs:“虚拟机”，
模板：`
更新foos

{{foo.ticketNum}

`,
bindToController：对，
财务主任（$范围）{
愚人警察=[{
票号：1
}, {
票号：2
}, {
票务编号：3
}];
const vm=Object.assign（此{
傻瓜，
更新操作
});
函数updatefos（）{
返回$timeout（（）=>{
vm.傻瓜=[]；
返回vm.傻瓜；
}).然后（（）=>{
返回getAllFoos（）。然后（foos=>{
vm.dullist=foos；
返回foos；
});
});
}
updatefos（）
}
}
//仅示例，返回项目的承诺
函数getAllFoos（）{
//模仿我无法控制的保存功能
$timeout（（）=>{
fooCount=fooCount+1；
}, 1000)
常量傻瓜=[…数组（fooCount）.keys（）].slice（fooCount-3）.map（num=>{
返回{
'ticketNum'：num
}
});
返回$q.resolve（傻瓜）
}
返回指令；
};

警告-此答案仅提供解决方法。
真正的解决方案是修复
getAllFoos
。
问题是
getAllFoos
很早就返回了旧代码。我试图在问题中重现这一点

解决方案是在服务返回之前等待任意时间


//代码在这里
有棱角的
.module（'示例'，[]））
.directive（'list'，list）
var-fooCount=4；
常量异步等待时间=1001；
函数列表（$timeout，$q）{
var指令={
限制：'E'，
controllerAs:“虚拟机”，
模板：`
更新foos

{{foo.ticketNum}

`,
bindToController：对，
财务主任（$范围）{
愚人警察=[{
票号：1
}, {
票号：2
}, {
票务编号：3
}];
const vm=Object.assign（此{
傻瓜，
更新操作
});
函数updatefos（）{
$timeout（（）=>{
返回getAllFoos（）；
}，异步等待时间）。然后（foos=>{
vm.dullist=foos；
返回foos；
});
}
updatefos（）
}
}
//仅示例，返回项目的承诺
函数getAllFoos（）{
$timeout（（）=>{
fooCount=fooCount+1；
}, 1000)
常量傻瓜=[…数组（fooCount）.keys（）].slice（fooCount-3）.map（num=>{
返回{
'ticketNum'：num
}
});
返回$q.resolve（傻瓜）
}
返回指令；
};

为什么要使用$timeout（）来填充foos？创建一个可以复制的plunker或codesandboxproblem@MarcusHöglund这是一次尝试，以确保其中的代码后面有一个摘要循环。我知道它不需要它，但我已经绝望了。@charlietfl我可以尝试这样做，但我最终会重新实现很多web应用。@georgeawg我实际上没有。我从另一个问题上抄了一些。也许他们是从普朗克来的？在真实版本中，AngularJS承诺（双重检查）
$timeout

的使用是一个症状，一个尚未解决的更深层次的问题。虽然添加任意超时可能会使代码正常工作，但这不是一个可靠的解决方案。@georgeawg and boy do I know。我应该在回答中更强调这一点吗？我讨厌在代码中这样做。但我想这是一种有效的绷带。