带有 $http.get 的 Angular UI Typeahead

Question

我正在尝试使用 JSON（不是 JSONP）从本地服务器获取数据，并使用 Angular UI 引导程序和 Angular 将其显示在预输入中。我能够从我在这个网站上找到的其他示例中获得 timeout() 和 jsonp 来工作，所以我知道 Promise 有效。

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

当我在调试器中运行此代码时，返回 filterFilter 行会运行。我可以查看 JSON 格式的数据，但我在单步执行 Angular 代码时迷失了方向。我有什么遗漏吗？

Answer 1

您正在为 Angular 提供一个回调函数来调用 http 成功。在您的 typeahead 函数返回后很久，http 调用就会成功。 javascript 中的一件大事是你必须绕开你的脑袋，那就是有大量的异步正在发生。你启动一个 http 请求，给它一个回调，然后离开。 angular 中的某些东西最终会调用您的成功函数，当您的成功函数返回时，您最终会回到 angular 领域。

Angular 在大多数事件中都很好，它会检查它知道需要监视更改的任何值/表达式的更改。然后它将应用这些更改需要发生的任何行为。所以 Angular 有一个称为$digest 的特殊过程来执行此操作。这种行为通常被称为 Angular 的“双向绑定”功能。

您想利用 Angular 的 2-way 绑定，例如：

$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>