angular.js - [angular]数组清空后,视图没有马上更新

【字号: 日期:2023-02-02浏览:31作者:雯心

问题描述

最近在开发一个数据列表时遇到问题:该数据列表有一个搜索功能,当输入时,会立即根据输入的关键词,从服务端请求搜索结果。然后视图马上渲染结果。具体代码如下:

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:还有其它数据列表,则没有这个问题

问题解答

回答1:

试试调用scope.$digest();这个有没有用?

回答2:

app.controller(’ListViewController’,function($scope){

$scope.files=[];$scope.vm={ key:’’};$scope.query=function(){ var param={nameFuzzy:$scope.vm.key } $scope.files=[]; //增加 $http.post(url,param).success(function(resp){ angular.each(resp,function(item){$scope.files.push(item); });});};

});

模版中 关键词输入框 使用ng-change='query()' 就可以了。 不要滥用watch 除非你明白怎么用

回答3:

用`$timeout(function(){$scope.files = [];})`

相关文章: