複数のコンパイルを実行する理由 - 角度指令

以下のスニペットでは、コンパイル段階が指令のすべてのインスタンスに対して1回しか実行されない場合は、console.log（ "コンパイル"時間？それは1回だけ実行する必要がありますか？ではない？複数のコンパイルを実行する理由 - 角度指令

//module declaration 
 
var app = angular.module('myApp',[]); 
 

 
//controller declaration 
 
app.controller('myCtrl',function($scope){ 
 
\t $scope.name = "Joseph"; 
 
}); 
 

 
//app declaration 
 
app.directive('myStudent',function(){ 
 
\t return{ 
 
\t \t template: "Hi! Dear!! {{name}}<br/>", 
 
\t \t compile: function(elem, attr){ 
 
\t \t \t console.log("compile"); 
 
\t \t } 
 
\t } 
 
});

<body ng-app="myApp" ng-controller="myCtrl"> 
 
<my-student></my-student> 
 
<my-student></my-student> 
 
<my-student></my-student> 
 
<my-student></my-student> 
 
<my-student></my-student> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
 
</body>

出典

2016-12-13 Deadpool

です。 'compile！= $ compile' –

少し説明できますか？ – Deadpool

HTMLのコンパイルは3つのフェーズで起こる：

$コンパイルは、DOMを横断し、ディレクティブにマッチします。

要素がディレクティブと一致するとコンパイラが検出すると、そのディレクティブはDOM要素と一致するディレクティブのリストに追加されます。 1つの要素が複数のディレクティブと一致することがあります。
DOM要素に一致するすべてのディレクティブが識別されると、コンパイラはそのディレクティブを優先度別にソートします。

各ディレクティブのコンパイル機能が実行されます。各コンパイル関数にはDOMを変更する機会があります。各コンパイル関数は、リンク関数を返します。これらの関数は、それぞれのディレクティブの返されたリンク関数を呼び出す "結合された"リンク関数で構成されています。
$ compileは、前の手順の結合されたリンク関数を呼び出してテンプレートをスコープにリンクします。次に、個々のディレクティブのリンク関数を呼び出し、要素にリスナーを登録し、各ディレクティブが行うようにスコープで$ watchを設定します。角度のドキュメントから

出典

2016-12-13 13:37:54 Raj

私のコンパイルが5回実行された理由はまだありませんか？ – Deadpool

コンパイルフェーズ DOMがロードされると、Angularはコンパイルフェーズを開始します。コンパイルフェーズでは、マークアップのトップダウンを通過し、すべてのディレクティブに対してコンパイルを呼び出します。グラフィカルに、我々はそうのようにそれを表現することができます：ネストされたディレクティブについては https://i.stack.imgur.com/PZPOm.png 注：以下は、そのリンクで子供たちをレンダリングするディレクティブには適用されません。関数。かなりの数のAngularディレクティブ（ngIf、ngRepeat、またはtranscludeを持つディレクティブのような）がそうです。これらのディレクティブは、子ディレクティブのコンパイルが呼び出される前に呼び出されるリンク関数をネイティブに持ちます。 – Raj

「ディレクティブは何ですか？ハイレベルで、ディレクティブはAngularJSのHTMLコンパイラに伝える（そのような属性、要素名、コメントやCSSクラスなど）DOM要素上のマーカー（$コンパイルされています）そのDOM要素に（例えばイベントリスナーを介して）指定された振る舞いを付けたり、DOM要素とその子要素を変換することさえできます。 "

したがって、角をコンパイルすると、マークアップを通過し、<my-student></my-student>がマークアップすると、「特定の動作」が適用されます。特定の動作を得るには、ディレクティブの各インスタンスが異なる属性またはパラメータを持つ可能性があるため、ディレクティブを毎回コンパイルする必要があります。

出典

2016-12-13 14:22:13

複数のコンパイルを実行する理由 - 角度指令

答えて

関連する問題