1. ホーム
  2. javascript

[解決済み] AngularJS: 送信からサーバー応答までの間、すべてのフォームコントロールを無効にする。

2022-08-04 10:07:11

質問

私は、ユーザーが "Save" または "Submit" ボタンをクリックし、データがワイヤ上を移動する期間中に、フォーム コントロールを無効にする (または少なくともユーザーとの対話を不可能にする) 場合、何が最善の (および正しい) 方法であるかにジレンマを感じています。JQuery(これは邪道です!!)を使いたくないし、すべての要素を配列として(クラスまたは属性マーカーによって)クエリしたいのです。 私がこれまでに持っていたアイデアは、次のとおりです。

  • すべての要素に cm-form-control このディレクティブは2つの通知: "data-sent" と "data-processed" を受信するようにします。そして、カスタムコードは、2番目の通知をプッシュするか、プロミスを解決する責任を負います。
  • 使用方法 promiseTracker のような非常に愚かなコードを生成するために強制されます。 ng-show="loadingTracker.active()" . もちろん、すべての要素に ng-disabled を使用したくないので ng-hide/show を使用して、"dancing" ボタンを回避することができます。
  • 我慢して JQuery を使用します。

どなたか良いアイデアをお持ちではないでしょうか?事前にありがとうございます。

UPDATEしました。 フィールドセットのアイデアはうまくいきます。同じことをしたい人のために、簡単なフィドルがあります。 http://jsfiddle.net/YoMan78/pnQFQ/13/

HTMLです。

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

とJSを指定します。

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

どのように解決するのですか?

すべてのフィールドを フィールドセット で囲み ngDisabled ディレクティブをこのように使用します。

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

フィールドセット内のすべての入力を自動的に無効化します。

次にコントローラで $scope.isSavingtrue をhttp呼び出しの前に、そして false の後になります。