$parse
、$interpolate
、および$compile
サービスの違いは何ですか?私にとって、彼らはすべて同じことをします。テンプレートを取り、それをテンプレート関数にコンパイルします。
これらはすべて、AngularJSビューのレンダリングを支援するサービスの例です(ただし、$parse
および$interpolate
はこのドメインの外部で使用できます)。各サービスの役割を説明するために、このHTMLの例を見てみましょう。
var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'
スコープの値:
$scope.name = 'image';
$scope.extension = 'jpg';
このマークアップを考えると、各サービスがテーブルにもたらすものは次のとおりです。
$compile
-マークアップ全体を取得してリンク関数に変換し、特定のスコープに対して実行すると、すべてのディレクティブを使用してHTMLテキストを動的なライブDOMに変換します(ここではng-src
)モデルの変更への対応。次のように呼び出します:$ compile(imgHtml)($ scope)そして、結果としてすべてのDOMイベント境界を持つDOM要素を取得します。 $compile
は、(特に)$interpolate
を使用して仕事をしています。$interpolate
は、埋め込み補間式を使用して文字列を処理する方法を知っています。例:/path/{{name}}.{{extension}}
。言い換えれば、補間式、スコープを持つ文字列を取り、結果のテキストに変換することができます。 $interpolation
サービスは、非常にシンプルな文字列ベースのテンプレート言語と考えることができます。上記の例では、$interpolate("/path/{{name}}.{{extension}}")($scope)
のようなこのサービスを使用して、結果としてpath/image.jpg
文字列を取得します。$parse
は、$interpolate
によって使用され、スコープに対して個々の式(name
、extension
)を評価します。特定の式のreadとsetの両方の値に使用できます。たとえば、name
式を評価するには、次のようにします。$parse('name')($scope)
で「イメージ」値を取得します。値を設定するには、次のようにします:$parse('name').assign($scope, 'image2')
これらのサービスはすべて連携して、AngularJSでライブUIを提供します。しかし、それらは異なるレベルで動作します:
$parse
は個々の式のみに関係します(name
、extension
)。これは、読み取り/書き込みサービスです。$interpolate
は読み取り専用で、複数の式を含む文字列に関係します(/path/{{name}}.{{extension}}
)$compile
はAngularJS機構の中心であり、HTML文字列(ディレクティブと補間式を使用)をライブDOMに変換できます。$interpolate-->
Let us say you have two variables assigned to $scope object in the controller,
$scope.a = 2;
$scope.b = 3;
var f = $interpolate("Result is : {{a*b}}");
var result = f($scope);
console.log(result); --->'Result is 6'
This means that $interpolate can take the string which has one or more angular expressions.
Now $parse:
var f1 = $parse("a*b");
var result1 = f1($scope);
console.log(result1); ----> '6'
**So $interpolate has the capability to evaluate a string with angular expressions mixed up in the string against the scope to get the result**.
Another important difference between $interpolate and $parse,$eval is:
**$interpolate has the capability to work with strings containing filters along with angular expressions.**
This feature is not accessible in $eval , $parse.
console.log($interpolate("Result is : {{a*b | currency : 'USD$'}}")($scope));
---> 'Result is USD $6.00'
$ interpolateには、$ evalおよび$ parseにあるように、$ scope変数への書き込みアクセス権がありません
$ parse、$ interpolate --->注入する必要がありますが、$ evalをコントローラーまたは使用する場所に注入する必要はありません
$ parse、$ interpolateは、どのコンテキストに対しても評価できる関数を与えますが、$ evalは常に$ scopeに対して評価されます。
$ evalと$ interpolateは舞台裏で$ parseのみを使用します。
ここにかわいい説明があります。
var img = img/{{name}}.{{extension}}
$parse - > (name,extension) = > vimal , .jpg
$interpolate -> use angular $parse and convert into string -> img/vimal.jpg
$compile -> can turn html string img/vimal.jpg into live DOM so new img tag will be added inside our DOM with all prototype that a img tag have.