1

コールバックを受け取るまでAngularでフォームを送信できないようにするにはどうすればよいですか?

私はこれらの線に沿って何かを持っています:

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

{{bar}}フォームを送信する前に、 ( を使用して) ローカル API 呼び出しから値を取得し、$httpそれをスコープに配置してから、実際のフォームを送信できるようにする必要があります ( を使用して POST するのではありません$http)。これはどのように行うことができますか？

4

5 に答える 5

2

Angular のフォーム ディレクティブは、それを 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();
                });
            };            
        };

フィドルを実行すると、隠しフィールドにデータが入力されていることがわかります。

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

コードの「醜い」部分は、次への直接参照です。

document.myForm

これをクリーンアップしたい場合は、フォームに属性を配置し、サービスと対話してそれを操作できるようにする独自のディレクティブを作成できます。つまり、MyFormService で、MyFormService.setAction(url) と MyFormService.submit() を実行できます。これはよりクリーンで再利用可能ですが、時間の都合上、それを設定することはできません。

于 2014-01-23T14:41:41.620 に答える
0

多くの可能性がありますが、リスクが少ないのは ng-switch を使用することです。

ng-switch は、必要がなければ DOM をロードしません。

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

于 2014-01-23T12:27:29.877 に答える