Question

在我的Angular 1.5.X应用程序中，我有一个带有以下模板的指令

<form id="pdfDownloadForm"
      name='pdfDownloadForm'
      method="POST"
      action="{{ downloadUrl }}">          

  <input type="hidden" name="data" value="" />   
  <button type="button" ng-click="submit()">Submit</button>
</form>

提交表单时，我想执行以下操作

将隐藏参数data的值设置为从远程服务检索的值
提交表格

尝试解决方案

大概设置隐藏参数的最简单方法是使用

<input type="hidden" name="data" ng-model="dataValue" />

然后在提交表单之前，将scope.dataValue分配给从远程服务检索到的值？

我尝试使用

scope.submit = function () {    
    $('#pdfDownloadForm').submit();
}

但是这会导致以下错误：

错误：[$ rootScope：inprog] $申请已在进行中

Answer 1

由于您使用的是Angular 1.5+，因此没有理由使用范围 - 使用controllerAs语法，或者最好使用components。

我通过中断首次提交调用并填充隐藏字段来实现您的任务。允许任何后续提交。

＆＃13;

// inside contorller

onSubmit(event) {
  if (!this.dataValue) {
    event.preventDefault();
    this.initializeData();
  }
}

initializeData() {
    $http.get('/my-data-source').then((response) => {
        this.dataValue = response.data.value;
        this.pdfDownloadForm.submit(); // requires <form name="$ctrl.pdfDownloadForm">
    });
}

＆＃13;

请参阅https://docs.angularjs.org/api/ng/directive/ngSubmit

最好避免使用ngClick，因为表单可以通过Enter而不是按钮点击提交。

Answer 2

<button type="button" ng-click="submit">Submit</button>

应该是

<button type="button" ng-click="submit()">Submit</button>

所以在您修改帖子之后，这不是解决方案吗？你试过吗？

以编程方式从Angular指令提交表单

尝试解决方案

2 个答案: