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

180

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

Stepan Suworow
quelle

Antworten:

464

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.
pkozlowski.opensource
quelle
11
Schön erklärt. Abgestimmt! :)
AlwaysALearner
2
Nett. Können Sie bitte beispielhafte Verwendungen und Ergebnisse für jede von ihnen angeben? Es ist mir immer noch nicht 100% klar und ich denke, das würde viel helfen. Vielen Dank!
Alejandro García Iglesias
2
In der Tat ausgezeichnet. Hier finden Sie einige weitere Beispiele für die Verwendung im realen Leben (und es ist auch ein guter einfacher Artikel über das Beschleunigen von Angular): Beschleunigen von Angular -Js mit einfachen Optimierungen "Zum Beispiel, anstatt eine globale Navigation zu rendern Mit ng-repeat können wir mithilfe des $ interpolate-Anbieters eine eigene Navigation erstellen, um unsere Vorlage für ein Objekt zu rendern und in DOM-Knoten zu konvertieren. "
Nadav Lebovitch
Tolle Erklärung. Ich habe überall gesucht, was eigentlich $interpolatein AnjularJS ist, und schließlich habe ich eine kompakte und informative Antwort erhalten.
Damith
Das Beispiel wurde so effektiv verwendet, um alle drei Serviceobjekte zu erklären. Wir brauchen mehr von diesen klaren und grundlegenden Erklärungen in verschiedenen Bereichen von eckigen js, um es für Anfänger zugänglicher zu machen.
Könige
3
$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.

Dhana
quelle
0

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