$ scope、$ element、$ attrs変数はまったくどのように関連していますか？

Question

私は半角スペースで保存されていないフォームから離れて移動するときに、ユーザーの確認を求めるカスタムangle-js指示文を書きました。

これは完璧に機能しますが、私が何をしているのか分かりません。

コードはそうのようになります。

HTML：

<input type="text" name="username" form-confirmation/> 

app.js：

angular.module('myModule').directive('formConfirmation', formConfirm) 

function formConfirm() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attrs) { 

      function conf(event) { 

       if ($scope[$element.attr('name')].$dirty) { 
        if (confirm("You have unsaved changes! Are you sure you wish to leave this page?") !== true) { 
         event.preventDefault(); 
        } 
       } 
      }; 

      $scope.$on('$locationChangeStart', conf); 
     } 
    } 
} 

私の質問：（$場合

1）私が使用して最初に試してみました要素$ダーティ）しかし、これは動作しませんでした。 $ elementと$ scope [$ element.attr（ 'name'）]との違いは何ですか？

2）$ element、$ attrs、$ scopeの関係は何ですか？

3）$ elementのattrメソッドはどこから来たのですか？

Answer 1

これらは、DOMに存在する要素によって関連付けられており、指示文（この場合はform-confirmation）が存在するため、AngularJSはその要素に対してコンパイル操作を実行します。

これらの項目の定義の全てを簡単にリンク機能のためのDOMを操作しディレクティブの作成下directive documentationにあります

• 範囲は、角度範囲オブジェクトです。
• 要素は、このディレクティブが一致するjqLit​​e-wrapped要素です。
• attrsは、正規化された属性名とそれに対応する属性値のキーと値のペアを持つハッシュオブジェクトです。
• コントローラは、ディレクティブの必須コントローラインスタンスまたはコントローラ（存在する場合）です。正確な値は、ディレクティブのrequireプロパティによって異なります。
• transcludeFnは、適切なトランスクリプションスコープに事前バインドされたトランスコード結合機能です。

さらにご質問を打破するには、次の

1. を私は（。$汚い$要素）場合は使用して最初に試みたが、これは動作しませんでした。どのように が$ scope [$ element.attr（ 'name'）]と異なる$要素ですか？ $ scopeオブジェクトのインデックスには、$要素に存在する特定の属性の存在に基づいてインデックスが付けられます。

2. $ element、$ attrs、$ scopeの関係は何ですか？あなたのディレクティブを含むコンパイル済みDOM要素を介して関連しています。

3. $ elementのattrメソッドはどこから来ましたか？ $ elementはDOM要素のjqLit​​eラッパーであるため、実際のDOMノートに存在する属性を単にattrプロパティとして公開しています。

上記リンク先の指示文書を徹底的に読み、消化することを強くお勧めします。これは、AngularJSの中核となるディレクティブの仕組みを理解するのに役立つ豊富な知識を含んでいます。