Qual è la differenza tra i servizi $ parse, $ interpolate e $ compile?

Question

Qual è la differenza tra i servizi $parse, $interpolate e $compile? Per me fanno tutti la stessa cosa: prendi il modello e compilarlo alla funzione modello.

Answer 1

Questi sono tutti esempi di servizi che aiutano nel rendering della vista AngularJS (sebbene sia possibile utilizzare $parse e $interpolate al di fuori di questo dominio). Per illustrare qual è il ruolo di ogni servizio prendiamo esempio di questo pezzo di codice HTML:

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

e valori nel campo di applicazione:

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

Dato questo markup qui è ciò che ogni servizio porta in tavola :

• $compile - si può prendere tutto il markup e di trasformarlo in una funzione di collegamento che, quando eseguito nei confronti di un certo ambito si accende un pezzo di testo HTML in dinamica, DOM in diretta con al l le direttive (qui: ng-src) che reagiscono ai cambiamenti del modello. Uno lo invocerebbe come segue: $ compile (imgHtml) ($ scope) e otterrebbe come risultato un elemento DOM con tutti i limiti dell'evento DOM. $compile sta facendo uso di $interpolate (tra le altre cose) per fare il suo lavoro.
• $interpolate sa come elaborare una stringa con espressioni di interpolazione incorporate, es .: /path/{{name}}.{{extension}}. In altre parole, può prendere una stringa con espressioni di interpolazione, un ambito e trasformarlo nel testo risultante. Si può pensare al servizio $interpolation come un linguaggio di template molto semplice basato su stringhe. Dato l'esempio precedente, si utilizzerà questo servizio come: $interpolate("/path/{{name}}.{{extension}}")($scope) per ottenere la stringa path/image.jpg come risultato.
• $parse viene utilizzato da $interpolate per valutare le singole espressioni (name, extension) rispetto a un ambito. Può essere utilizzato sia per letto e impostato per valori per una determinata espressione. Ad esempio, per valutare l'espressione name si farebbe: $parse('name')($scope) per ottenere il valore "immagine". Per impostare il valore si dovrebbe fare: $parse('name').assign($scope, 'image2')

Tutti questi servizi stanno lavorando insieme per fornire un'interfaccia utente dal vivo in AngularJS. Ma essi operano su diversi livelli:

• $parse si occupa di solo singole espressioni (name, extension). È un servizio di lettura-scrittura.
• $interpolate è di sola lettura e si occupa di stringhe contenenti molteplici espressioni (/path/{{name}}.{{extension}})
• $compile è il cuore delle macchine AngularJS e può trasformare stringhe di codice HTML (con le direttive e le espressioni di interpolazione) in DOM dal vivo.

Answer 2

$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' 

$ interpolare non ha l'accesso in scrittura alle variabili $ portata di quella che abbiamo in $ eval e $ analizziamo

$ analizzare, $ interpolare ---> deve essere iniettato ma $ eval non deve essere iniettato nel controllore o dove viene utilizzato

$ analizzare, $ interpolare dare la funzione che può essere valutata in qualsiasi contesto ma $ eval viene sempre valutata contro $ portata.

$ eval e $ interpolate dietro le quinte utilizza solo $ analisi.