Was ist der Unterschied zwischen den Diensten $ parse, $ interpolate und $ compile?

Was ist der Unterschied zwischen $parse, $interpolateund $compileDienstleistungen? Für mich machen alle dasselbe: Nehmen Sie die Vorlage und kompilieren Sie sie zur Vorlagenfunktion.

Dies sind alles Beispiele für Dienste, die das Rendern von AngularJS-Ansichten unterstützen (obwohl $parseund $interpolateaußerhalb dieser Domäne verwendet werden könnten). Um zu veranschaulichen, welche Rolle die einzelnen Dienste spielen, nehmen wir ein Beispiel für dieses HTML-Element:

var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'

und Werte zum Umfang:

$scope.name = 'image';
$scope.extension = 'jpg';

Angesichts dieses Markups bringt jeder Service Folgendes auf den Tisch:

• $compile- Es kann das gesamte Markup in eine Verknüpfungsfunktion umwandeln, die bei Ausführung in einem bestimmten Bereich einen HTML-Text in ein dynamisches Live-DOM verwandelt, wobei alle Anweisungen (hier ng-src:) auf Modelländerungen reagieren. Man würde es wie folgt aufrufen: $ compile (imgHtml) ($ scope) und als Ergebnis ein DOM-Element mit allen DOM-Ereignisgrenzen erhalten. $compilenutzt $interpolate(unter anderem) seine Arbeit.
• $interpolateweiß, wie man einen String mit eingebetteten Interpolationsausdrücken verarbeitet, z /path/{{name}}.{{extension}}. Mit anderen Worten, es kann eine Zeichenfolge mit Interpolationsausdrücken und einem Gültigkeitsbereich in den resultierenden Text umwandeln. Man kann sich den $interpolationService als eine sehr einfache, stringbasierte Vorlagensprache vorstellen. In dem obigen Beispiel würde man diesen Dienst wie folgt verwenden: $interpolate("/path/{{name}}.{{extension}}")($scope)um den path/image.jpgString als Ergebnis zu erhalten.
• $parsewird verwendet $interpolate, um einzelne Ausdrücke ( name, extension) anhand eines Bereichs zu bewerten . Es kann verwendet werden, um Werte für einen bestimmten Ausdruck zu lesen und festzulegen. Um beispielsweise den Ausdruck auszuwerten, würde man Folgendes tun: um den Wert "image" zu erhalten. Um den Wert einzustellen, würde man tun:name$parse('name')($scope)$parse('name').assign($scope, 'image2')

Alle diese Dienste arbeiten zusammen, um eine Live-Benutzeroberfläche in AngularJS bereitzustellen. Aber sie arbeiten auf verschiedenen Ebenen:

• $parsebefasst sich nur mit einzelnen Ausdrücken ( name, extension). Es ist ein Lese- / Schreibdienst.
• $interpolateist schreibgeschützt und befasst sich mit Zeichenfolgen, die mehrere Ausdrücke enthalten ( /path/{{name}}.{{extension}})
• $compile ist das Herzstück der AngularJS-Maschinerie und kann HTML-Zeichenfolgen (mit Direktiven und Interpolationsausdrücken) in Live-DOM umwandeln.

$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 hat keinen Schreibzugriff auf die $ scope-Variablen wie in $ eval und $ parse

$ parse, $ interpolate ---> muss injiziert werden, aber $ eval muss nicht in den Controller injiziert werden oder wo es verwendet wird

$ parse, $ interpolate geben die Funktion an, die für jeden Kontext ausgewertet werden kann, aber $ eval wird immer für $ scope ausgewertet.

$ eval und $ interpolate hinter den Kulissen verwenden nur $ parse.

Hier ist die süße Erklärung.

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.