メソッド：チェックアウト

$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};

「チェックアウト」をクリックして、ユーザーが編集を完了し、チェックアウトしたいことを示します。この実用的なアイテムでは、モデルデータをサーバーに送信する前に、指令にロードされたすべてのフォームが検証されることを確認する必要があります。この記事の範囲には、データをサーバーに送信する方法は含まれていません。すべてのクライアント間通信に$qサービスを使用することを検討することをお勧めします。

この方法はAngularの能力を使用し、子のフォームは親の形を無効にする可能性があります。親の形式は、子供の形との関係を明確に説明するためにに指名されています。子フォームが

のすべてのフォームは有効でなければならず、その內部$http屬性は真でなければなりません。

$scope.validateChildForm = function (form, data, product) {
  // 重置表單，使其不再有效
  $scope.formsValid = false;
  var deferred = $q.defer();

  // 驗證表單和數據的邏輯
  // 必須在promise上返回resolve()或reject()。
  $timeout(function () {
    if (angular.isUndefined(data.amount)) {
      return deferred.reject(['amount']);
    }

    if ((data.amount < product.minAmount) || (data.amount > product.maxAmount)) {
      return deferred.reject(['amount']);
    }

    deferred.resolve();
  });
  return deferred.promise;
}

ディレクティブを作成しますparentForm$setValidity parentForm私たちの命令は、完全な相互運用性とスケーラビリティを可能にする共通のインターフェイスに従う必要があります。私たちの指令の名前は、それらに含まれる製品によって異なります。 $valid

分離命令の範囲範囲<

ディレクティブローカルスコープの最初のプロパティは、ローカルスコープをコントローラーに登録する方法です。この命令では、ローカルオブジェクトをメインコントローラーに渡すためのパイプラインが必要です。

オブジェクト：giftdata

これは、命令ビューで使用される集中モデルデータです。この情報は、FormControllerで発生する更新がメインコントローラーに伝播するように、雙方向のデータバインディングになります。

メソッド：validAteChildform

このメソッドは、コントローラーで定義されている方法と同じです。この方法は、ユーザーが命令ビューで情報を更新するときに呼び出されます。

オブジェクト：製品

このオブジェクトには、購入されている製品に関する情報が含まれています。私たちのデモンストレーションでは、少數のプロパティしかない比較的小さなオブジェクトを使用しています。私のチームの実際のアプリケーションには、アプリケーションで決定を下すための多くの情報があります。検証されているコンテンツのコンテキストを提供するために、validateChildFormに渡されます。

命令リンク

私たちの指令は、postLink関數を使用し、スコープオブジェクトを渡します。さらに、postLink関數は他のいくつかのパラメーターも受け入れます。それらは次のとおりです：

1. scope - 各ディレクティブインスタンスに作成された分離スコープにアクセスするために使用されます。
2. iElement - 要素アイテムにアクセスするために使用されます。割り當てられている要素內のpostLink関數から要素を更新および変更することは安全です。
3. iAttrs - インスタンス化指令の同じタグのプロパティにアクセスするために使用されます。
4. controller - 外部コントローラーの依存関係が存在する場合、リンク関數で使用できます。これらは、ディレクティブオブジェクトのrequire屬性に対応する必要があります。
5. transcludeFn - この関數は、命令オブジェクトの$transcludeパラメーターにリストされている関數と同じです。

link責任があります。

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

フォームスコープ

$scope.formsValid = false;

ラッピングメソッドregisterFormScopein$timeoutは、実行スタックが終了するまで実行を遅らせます。これにより、コンパイラは、コントローラーと命令の間に必要なすべてのリンクを完了するのに十分な時間を提供します。 scope.form.fieldsは配列であり、FormControllerで見つかったプロパティの名前であり、サーバー側の検証エラーを設定するために非常に重要です。 registerFormScopeの目的は、FormControllerを親コントローラーに送信し、新しく作成されたフォームをparentFormの子フォームに設定できるようにすることです。

$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};

メソッドが呼び出されます。この方法では、コントローラーのsaveFormメソッドを順番に呼び出して、validateChildForm、FormController、scope.giftDataに渡します。コントローラーは、他の検証ルールに従って解析または拒否される約束を返します。 scope.product

約束が拒否されると、コントローラーは無効なフィールドを返します。これは、フォームを無効にし（parentForm）、他のフィールドレベルエラーを設定するために使用されます。デモでは、amountフィールドでの単純なポスト検証を使用しますが、失敗の原因は返されません。 validateChildFormからの拒否は、アプリケーションが必要とするのと同じくらい複雑または単純です。

Promiseが正常に戻った場合、コマンドはフォームにフィールドの有効性を設定する必要があります。コードは、以前に特定されたサーバーエラーもクリアする必要があります。これにより、指令がユーザーに誤ってエラーを提供しないことが保証されます。すべてのサブフォームが有効である場合、$setValidityのすべてのフィールドをコントローラー內のparentFormにリンクして有効性を設定します。

私たちの見解を設定します< ビューはそれほど複雑ではありません。デモでは、製品を次のフィールドに簡素化しました。名前と量です。次のステップでは、このアプリケーションを完了するために必要なビューを調査します。

ビューコードの概要（製品A）およびここ（製品B）を見つけることができます。

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

を使用すると、DOMが未使用のng-repeatで誤って満たされないようにします。 ng-if FormController

$scope.formsValid = false;

上記の

以上がAngularJSでフォームベースのディレクティブを作成する方法の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。