Угловой пользовательский интерфейс Typeahead с $ http.get

Question

Я пытаюсь получить данные с локального сервера с помощью JSON (не JSONP) и отображать его в виде headhead с использованием Angular UI bootstrap и Angular. Мне удалось получить тайм-аут() и jsonp для работы с другими примерами, которые я нашел на этом сайте, поэтому я знаю, что обещания работают.

function DepedencyCtrl($scope, $http, $timeout, filterFilter) { 
... 
$scope.typeahead = function(type, name) { 
    return $http.get('pulldata', {params: {type: type, name: name}}).success(function(data){ 
    return filterFilter(data, name); 
    }, 1000); 
}; 

Когда я запускаю этот код в отладчике, выполняется обратная строка фильтра фильтра. Я могу видеть свои данные в форме JSON, но я теряюсь, пробираясь через Angular Code. Есть что-то, что мне не хватает?

Answer 1

Вы предоставляете угловую функцию обратного вызова для вызова http-успеха. HTTP-вызов выполняется успешно после возвращения функции typeahead. Большая вещь в javascript, которую вы должны обернуть вокруг, - это тонна асинхронности. Вы начинаете HTTP-запрос, даете ему обратный вызов и уходите. Что-то в угловом итоге вызывает вашу функцию успеха, и когда ваша функция успеха вернется, вы вернетесь в угловую землю.

Угловое хорошо в том, что на большинстве событий он будет проверять изменения для любых значений/выражений, которые, как он знает, должны следить за изменениями. Затем он будет применять любое поведение, которое должно произойти при этих изменениях. Поэтому у Angular есть специальный процесс, который называется $digest, который делает это. Такое поведение часто объявляется как функция «привязки» двухсторонней привязки.

Вы хотите воспользоваться 2-полосных переплетов угловых в, что-то вроде:

$scope.typeaheadText = ""; 
$scope.typeahead = function(type, name) { 
    return $http.get('pulldata', {params: {type: type, name: name}}).success(function(data){ 
    $scope.typeaheadText = data.typeaheadText; 
    }, 1000); 
}; 

Соответствуя HTML:

<span ng-controller="YourTypeaheadCtrl"> 
{{typeaheadText}} 
</span>