如果上面的答案没有帮助人们在 angularjs 中使用 $http 调用并且其 api 响应太大,在我的情况下是 70,000 行:
我最近在我的 angularjs 应用程序中遇到了同样的问题。我在我的 HTML 中使用了这个:
<input class="form-control" style="text-overflow: ellipsis" id="diagnosis-list" type="text" ng-model="diagnosis" typeahead="searchDiagnosis as searchDiagnosis.type_code + ' &nbsp : ' + searchDiagnosis.type_code_value for searchDiagnosis in getMatchingDiagnosisList($viewValue)" typeahead-on-select="selectDiagnosis($item)">
getMatchingDiagnosisList() 在控制器中编写如下:
$scope.getMatchingDiagnosisList = function($viewValue){
console.log("$viewValue",$viewValue);
if($viewValue.length == 2 || $viewValue.length > 2){
console.log("$viewValue.length",$viewValue.length);
xService.getDiagnosticList($viewValue).then(function(response){
$scope.searchDiagnosis = {};
if(response.data.typeCode){
$scope.searchDiagnosis = response.data;
}
else{
$scope.searchDiagnosis = {'typeCode':[]};
}
}).catch(function(){
$scope.searchDiagnosis = {'typeCode':[]};
});
return $scope.searchDiagnosis.typeCode;
}
};
正在调用 angularjs 服务,其中包含以下 API 调用:
getDiagnosticList: function(value){
var url = URL.matchingDiagnosticList.replace("SEARCH_STRING",value)
return $http.get(url, {
headers: headerService.getHeader()
}).success(function(response) {
return response;
});
}
由于调用了rest API,此代码无法正常工作,因此经过大量调试后,我将控制器功能编辑为:
$scope.getMatchingDiagnosisList = function($viewValue){
$scope.isLoading = true;
//Whatever you return below will be taken as a parameter in getMatchesAsync() of the directive, so modify the directive accordingly
return patientService.getDiagnosticList($viewValue);
};
};
在我的例子中,我修改了路径 bower_components\angular-bootstrap\ui-bootstrap-tpls.js 或 bower_components\angular-bootstrap\ui-bootstrap.js 中的指令 getmatchesasync(),如下所示:
var getMatchesAsync = function(inputValue) {
var locals = {$viewValue: inputValue};
isLoadingSetter(originalScope, true);
isNoResultsSetter(originalScope, false);
$q.when(parserResult.source(originalScope, locals)).then(function(matchesFull) {
//it might happen that several async queries were in progress if a user were typing fast
//but we are interested only in responses that correspond to the current view value
var matches = matchesFull.data.typeCode;
var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
if (onCurrentRequest && hasFocus) {
if (matches && matches.length > 0) {
scope.activeIdx = focusFirst ? 0 : -1;
isNoResultsSetter(originalScope, false);
scope.matches.length = 0;
//transform labels
for (var i = 0; i < matches.length; i++) {
locals[parserResult.itemName] = matches[i];
scope.matches.push({
id: getMatchId(i),
label: parserResult.viewMapper(scope, locals),
model: matches[i]
});
}
scope.query = inputValue;
//position pop-up with matches - we need to re-calculate its position each time we are opening a window
//with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
//due to other elements being rendered
recalculatePosition();
element.attr('aria-expanded', true);
//Select the single remaining option if user input matches
if (selectOnExact && scope.matches.length === 1 && inputIsExactMatch(inputValue, 0)) {
scope.select(0);
}
} else {
resetMatches();
isNoResultsSetter(originalScope, true);
}
}
if (onCurrentRequest) {
isLoadingSetter(originalScope, false);
}
}, function() {
resetMatches();
isLoadingSetter(originalScope, false);
isNoResultsSetter(originalScope, true);
});
};