angular.js - [angular] After the array is cleared, the view does not update immediately

Question

I recently encountered a problem when developing a data list:
The data list has a search function. When entered, the search results will be immediately requested from the server based on the entered keywords. The view then renders the result immediately. The specific code is as follows:

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();
});

The current problem is: when the array is cleared, the list on the view does not disappear. After the search results are returned and the rendering is successful, the previous list disappears. In other words, how many times will the two sets of data exist at the same time? It takes hundreds of milliseconds for the previous set of data to disappear. Calling $scope.$apply() is of no use. It will throw an error: degist in progress, indicating that the view is already being updated, but I don't know why it is so slow.
ps: There are other data lists, which do not have this problem

Answer 1

Try calling scope.$digest();Does this work?

Answer 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);
            });
        });
};

});

Just use ng-change="query()" in the keyword input box in the template. Don’t abuse watch unless you know how to use it

Answer 3

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