requireの意味は何ですか： 'ngModel'？

これは私のディレクティブのHTMLです。

<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>

私のディレクティブではこれがあります：

return {
        require: 'ngModel',
        replace: true,
        scope: {
            modal: '=modal',
            ngModel: '=',
            pid: '=pid'
        },

誰かが私に言うことができます、require： 'ngModel'の意味は何ですか？これは多くの異なるディレクティブで見られます。これをデータモーダルと呼んでもいいですか？

データモーダルに変更すると、Angularからのメッセージが表示されるので混乱しています

Controller 'ngModel', required by directive 'textarea', can't be found!

このrequire命令は、link関数の4番目の引数として指定したディレクティブのコントローラーを提供します。（あなたが使用することができ^、親要素上のコントローラを探すために、?それはオプションになります。）だから、require: 'ngModel'あなたのためのコントローラ与えngModelディレクティブですngModelController。

ディレクティブコントローラは、他のディレクティブが使用できるAPIを提供するように作成できます。をngModelController使用するngModelと、値の取得や設定など、に組み込まれている特別な機能にアクセスできます。次の例について考えてみます。

<input color-picker ng-model="project.color">

app.directive('colorPicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the ngModel whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            ngModel.$setViewValue(newValue);
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      ngModel.$render = function() {
        element.val(ngModel.$modelValue);
        element.change();                
      };
    }
  }
});

このディレクティブは、ngModelコントローラーを使用して、カラーピッカーから色の値を取得および設定します。次のJSFiddleの例を参照してください：http ://jsfiddle.net/BinaryMuse/AnMhx/

を使用している場合はrequire: 'ngModel'、おそらく分離スコープでも使用ngModel: '='しないでください。これngModelControllerにより、値を変更するために必要なすべてのアクセスが提供されます。

AngularJSホームページの一番下の例でもこの機能を使用しています（カスタムコントローラを使用する場合を除くngModel）。

ディレクティブの筐体としては、例えば、ngModel対ng-model対data-ng-model：角支持体は、DOMに複数のフォームを使用している間、あなたは（ディレクティブを作成、または使用して例えば、名前でディレクティブを参照する場合require）、あなたは常にlowerCamelCaseを使用名前の形式。

カスタムディレクティブの作成ドキュメントに記載されているように：（まずコメントのあなたの質問に）

data-ng-model代わりにできますか？

答え：

ベストプラクティス：ダッシュ区切り形式を使用して優先（例えばng-bindのためngBind）。あなたがHTMLの検証ツールを使用したい場合は、代わりに使用することができますdata（例えば-prefixedバージョンをdata-ng-bindためngBind）。上記の他の形式は、従来の理由で受け入れられますが、それらを避けることをお勧めします。

例：

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

次に、何を?ngModel表していますか？

// Always use along with an ng-model
require: '?ngModel',

ディレクティブを使用すると、属性/コントローラーと一緒に使用されるように強制されますng-model。

requireセッティング

（Brad GreenとShyam Seshadriによる本 AngularJS からの抜粋）

他のディレクティブには、requireプロパティ構文を使用してこのコントローラーを渡すことができます。requireの完全な形式は次のようになります。

require: '^?directiveName'

オプション：

1. directiveName

   このキャメルケースの名前は、コントローラがどのディレクティブからのものかを指定します。したがって、<my-menuitem>ディレクティブでその親のコントローラーを見つける必要がある場合は、<my-menu>myMenuとして記述します。

2. ^

   デフォルトでは、Angularは同じ要素の名前付きディレクティブからコントローラーを取得します。このオプションの^シンボルを追加すると、ディレクティブを見つけるためにDOMツリーを上に移動することになります。例では、この記号を追加する必要があります。最終的な文字列はになります^myMenu。

3. ?

   必要なコントローラーが見つからない場合、Angularは例外をスローして問題を通知します。?文字列にシンボルを追加すると、このコントローラはオプションであり、見つからない場合は例外をスローしないように指定できます。ありそうに聞こえないかもしれませんが<my-menu-item>、<mymenu>コンテナなしでsを使用したい場合は、これをの最終的なrequire文字列に追加できます?^myMenu。

require:'ngModel'そしてrequire:'^ngModel'あなたはディレクティブがバインドされている要素やその親要素に添付モデルを注入することができます。

スコープオプションを使用して渡すのではなく、ngModelをリンク/コンパイル関数に渡す最も簡単な方法です。ngModelにアクセスしたら、を使用して値を変更したり、を使用$setViewValueしてダーティ/クリーンにしたり$formatters、ウォッチャーを適用したりできます。

以下は、ngModelを渡し、5秒後にその値を変更する簡単な例です。

デモ：http : //jsfiddle.net/t2GAS/2/

myApp.directive('myDirective', function($timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            $timeout(function() {
                ngModel.$setViewValue('StackOverflow');  
            }, 5000);                
        };
    }
  };
});