最近在開發一個資料清單時遇到問題:
此資料清單有一個搜尋功能,輸入時,會立即根據輸入的關鍵字,從服務端請求搜尋結果。然後視圖馬上渲染結果。具體程式碼如下:
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:還有其它資料列表,則沒有這個問題
試試調用
scope.$digest();
這個有沒有用?app.controller('ListViewController',function($scope){
});
模版中 關鍵字輸入框 使用ng-change="query()" 就可以了。 不要濫用watch 除非你明白怎麼用
用
`$timeout(function(){
$scope.files = [];
})`