javascript 使用 angular-ui bootstrap 和 typeahead-loading
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19034746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using angular-ui bootstrap and typeahead-loading
提问by bjo
So I can't seem to figure out how to use the typeahead-loading attribute to show a spinner while my typeahead is getting remote data. I can't find any examples of its use anywhere.
所以我似乎无法弄清楚如何在我的 typeahead 获取远程数据时使用 typeahead-loading 属性来显示微调器。我在任何地方都找不到任何使用它的例子。
Is that value something we would need to set manually in the scope when we start a request? and then manually set it to false when the request completes? Sometimes there is magic with these angular things and i'm never sure if something extra is happening on the back-end to handle some of these things.
当我们开始请求时，我们需要在范围内手动设置该值吗？然后在请求完成时手动将其设置为 false？有时，这些有角度的东西很神奇，我永远不确定后端是否发生了一些额外的事情来处理其中一些事情。
Just a simple example of how to use the value in typeahead-loading would be nice. I just can't think of how to use it correctly. Of course much of the angular documentation lacks good examples for some of the more complex features.
只是一个如何在预先加载中使用该值的简单示例就好了。我只是想不出如何正确使用它。当然，很多 angular 文档都缺少一些更复杂功能的好例子。
回答by Juliane Holzt
In my opinion the documentation is not that unclear on this: "Binding to a variable [...]". So you just specify a variable in your current scope which will be set to true while the lookup is running. Here is a very dumb example just to show whats happening:
在我看来，文档对此并不是很清楚：“绑定到变量 [...]”。因此，您只需在当前范围内指定一个变量，该变量将在查找运行时设置为 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>
If you run this and type something in to the search, you will notice that the output is "isLoading: false". However on the javascript console you will see that while the lookup function is running, $scope.isLoading is set to true.
如果你运行它并在搜索中输入一些东西，你会注意到输出是“isLoading: false”。但是，在 javascript 控制台上，您将看到，当查找功能正在运行时，$scope.isLoading 设置为 true。
So just specify a variable in your scope with typeahead-loading and then you can do something like this:
因此，只需使用 typeahead-loading 在您的范围内指定一个变量，然后您就可以执行以下操作：
<div ng:show="!!isLoading">loading...</div>
回答by MFB
No need to go through a function (I don't, anyway):
不需要通过一个函数（反正我不需要）：
<input ng-model="search" typeahead="result for result in lookup($viewValue)"
typeahead-loading="is_loading">
<!-- change class (or something) when lookup is loading -->
<span ng-class="{'loading-class': is_loading}">Hey, I'm loading!</span>
