web-dev-qa-db-ja.com

$ parse、$ interpolate、および$ compileサービスの違いは何ですか？

$parse、$interpolate、および$compileサービスの違いは何ですか？私にとって、彼らはすべて同じことをします。テンプレートを取り、それをテンプレート関数にコンパイルします。

javascriptangularjsangular-services
180
Stepan Suvorov

これらはすべて、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に変換できます。
463
pkozlowski.opensource
$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のみを使用します。

3
Dhana

ここにかわいい説明があります。

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.
0
Gajender Singh