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

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

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

 var imgHtml = '' 

e valori sullo scopo:

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

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

  • $compile – può prendere l’intero markup e trasformarlo in una funzione di collegamento che, quando eseguita contro un certo scope, trasformsrà un pezzo di testo HTML in un DOM dinamico e attivo con tutte le direttive (qui: ng-src ) che reagiscono al modello i cambiamenti. 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 template molto semplice basato su stringhe. Dato l’esempio precedente, si userebbe questo servizio come: $interpolate("/path/{{name}}.{{extension}}")($scope) per ottenere come risultato la stringa path/image.jpg .
  • $parse viene utilizzato da $interpolate per valutare le singole espressioni ( name , extension ) rispetto a un ambito. Può essere utilizzato per leggere e impostare valori per una determinata espressione. Ad esempio, per valutare l’espressione del name si farebbe: $parse('name')($scope) per ottenere il valore di “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 operano su diversi livelli:

  • $parse riguarda solo le singole espressioni ( name , extension ). È un servizio di lettura-scrittura.
  • $interpolate è di sola lettura e riguarda stringhe contenenti più espressioni ( /path/{{name}}.{{extension}} )
  • $compile è il cuore delle macchine AngularJS e può trasformare stringhe HTML (con direttive e espressioni di interpolazione) in live 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 non ha l’accesso in scrittura alle variabili $ scope come abbiamo in $ eval e $ parse

$ parse, $ interpolate —> deve essere iniettato ma $ eval non deve essere iniettato nel controller o dove viene usato

$ parse, $ interpolate fornisce la funzione che può essere valutata rispetto a qualsiasi contesto, ma $ eval viene sempre valutata rispetto a $ scope.

$ eval e $ interpolate dietro le quinte usa solo $ parse.

Ecco la spiegazione carina.

 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.