javascript - 使用 angular-ui bootstrap 和 typeahead-loading

Question

所以我似乎无法弄清楚如何在我的 typeahead 获取远程数据时使用 typeahead-loading 属性来显示微调器。我在任何地方都找不到它的使用示例。

当我们开始请求时，这个值是否需要我们在范围内手动设置？然后在请求完成时手动将其设置为 false？有时这些有棱 Angular 的东西有魔力，我永远不确定后端是否发生了一些额外的事情来处理其中的一些事情。

只是一个简单的例子，说明如何在预先加载中使用该值会很好。我只是想不出如何正确使用它。当然，很多 Angular 文档都缺乏一些更复杂的功能的好例子。

Answer 1

在我看来，文档对此并不清楚:“绑定(bind)到变量 [...]”。因此，您只需在当前范围内指定一个变量，该变量将在查找运行时设置为 true 。这是一个非常愚蠢的例子，只是为了说明发生了什么:

function MainController($scope) {
  $scope.lookup = function() {
    console.log("isLoading is " + $scope.isLoading);
    return [];
  }
}

<div ng:controller="MainController">
  <input type="text" ng:model="search"
    typeahead="result for result in lookup($viewValue)"
    typeahead-loading="isLoading"></input>
  isLoading: {{isLoading}}
</div>

如果您运行此程序并在搜索中输入内容，您会注意到输出为“isLoading: false”。但是在 javascript 控制台上，您会看到当查找函数运行时，$scope.isLoading 设置为 true。

因此只需在您的范围内使用预加载指定一个变量，然后您就可以执行如下操作:

<div ng:show="!!isLoading">loading...</div>