[angular]数组清空后,视图没有马上更新
最近在开发一个数据列表时遇到问题:
该数据列表有一个搜索功能,当输入时,会立即根据输入的关键词,从服务端请求搜索结果。然后视图马上渲染结果。具体代码如下:
app.controller('ListViewController',function($scope){
$scope.files=[];
$scope.vm={
key:''
};
$scope.query=function(){
var param={
nameFuzzy:$scope.vm.key
}
$http.post(url,param)
.success(function(resp){
angular.each(resp,function(item){
$scope.files.push(item);
});
});
};
$scope.$watch('vm.key',function(newVal,oldVal){
if(newVal!==oldVal){
//关键词发生变化时,清空列表
$scope.files.length=0;
//然后请求数据
$scope.query();
}
});
$scope.query();
});
现在的问题在于:当清空数组时,视图上的列表没有消失,待搜索结果返回后,并渲染成功,前一个列表才消失,也就是说,两组数据会同时存在几百毫秒的样子,前一组数据才消失,调用$scope.$apply()并没有什么用,会抛出错误:degist in progress,说明已经在更新视图中,但是不知道为什么会这么慢。
ps:还有其它数据列表,则没有这个问题
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
试试调用
scope.$digest();
这个有没有用?app.controller('ListViewController',function($scope){
});
模版中 关键词输入框 使用ng-change="query()" 就可以了。 不要滥用watch 除非你明白怎么用
用
`$timeout(function(){
$scope.files = [];
})`