javascript - 延迟表单提交(AngularJS)

Question

如何防止在收到回调之前在 Angular 中提交表单？

我有一些类似的东西:

<form method="post" action="http://example.com/external" ng-submit="submit()">
  <input type="hidden" name="foo" value="{{bar}}" />
  <input type="submit" />
</form>

在提交表单之前，我需要从本地 API 调用(使用 $http)获取 {{bar}} 值，并将其放入范围中在允许实际表单提交之前(不是使用$http POSTed)。如何做到这一点？

Answer 1

Angular 中的 form 指令会将其包装在 formController 中并拦截它。您仍然可以运行异步代码，但需要引用 DOM 表单来提交它。我有一个解决解决方案的示例 - 基本上它设置了一个按钮来提交表单，异步设置隐藏字段，然后发布它。

相关代码如下:

MyController = function ($scope, MyService) {
            $scope.boo = "";
            $scope.submit = function () {
                MyService.getAsync().then(function(result) {
                    $scope.boo = result;
                    document.myForm.action = "http://example.com/";
                    document.myForm.submit();
                });
            };            
        };

如果您运行 fiddle ，您将看到隐藏字段已填充:

http://jsfiddle.net/jeremylikness/T6B2X/

代码中“丑陋”的部分是直接引用:

文档.myForm

如果您想清理这个问题，您可以编写自己的指令，该指令允许您在表单上放置属性并与服务交互以操作它。 IE。 MyFormService 然后我可以执行 MyFormService.setAction(url) 和 MyFormService.submit() - 这会更干净且可重用，但时间不允许我为您设置它。