使用 AngularJS 提交引导表单时显示进度（圆圈）答案

【问题标题】：Display progress (circle) while submitting bootstrap form using AngularJS使用 AngularJS 提交引导表单时显示进度（圆圈）
【发布时间】：2015-12-24 21:07:21
【问题描述】：

我有使用引导程序构建的表单，它使用 $http 将数据提交到远程服务器，但中间有一个时间延迟。

我想知道如何实现进度（页面中间的圆圈）以让用户知道正在提交表单，是否有使用 Angular UI 服务的功能？我已经搜索过，但没有找到。或者我应该使用引导程序来实现这个？

【问题讨论】：

您可以在请求运行时只显示 gif 图像。
你也可以看看这个：github.com/jfeigel/ngLoader
我建议研究 Angular Material。有一个很好的指令：material.angularjs.org/latest/#/api/…
您无法测量进度事件，除非它具有 lengthComputable 属性。检查developer.mozilla.org/en-US/docs/Web/API/ProgressEvent/… .... 如果您在表单提交中上传文件，您可以尝试实现进度事件侦听器。查看此stackoverflow.com/a/22987941/1055987 了解更多信息
@manonthemat 感谢您的提示，如果您可以将您的评论作为答案包含在内，我可以标记它。

标签： javascript angularjs forms twitter-bootstrap

【解决方案1】：

我建议研究 Angular Material。有一个很好的指令：https://material.angularjs.org/latest/#/api/material.components.progressCircular/directive/mdProgressCircular

应 David Hemsey 的要求，这是我之前的评论作为答案。

【讨论】：

【解决方案2】：

你可以重复使用这些.. angular-spinner 或 angular-sham-spinner

BLOG 关于微调器如何与 angularjs 一起工作

或者如果你想自己做......

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

我还没有测试过代码，但指令不会比这更复杂...

【讨论】：