Qual é a diferença entre os serviços $ parse, $ interpolate e $ compile?

Qual é a diferença entre os serviços $parse , $interpolate e $compile ? Para mim, todos fazem a mesma coisa: pegar modelo e compilá-lo para a function de modelo.

Esses são todos os exemplos de serviços que auxiliam na renderização de visualizações do AngularJS (embora $parse e $interpolate possam ser usados ​​fora desse domínio). Para ilustrar qual é o papel de cada serviço, vamos dar um exemplo deste pedaço de HTML:

 var imgHtml = '' 

e valores no escopo:

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

Dada essa marcação, aqui está o que cada serviço traz para a mesa:

  • $compile – ele pode pegar toda a marcação e transformá-la em uma function de vinculação que, quando executada em um determinado escopo, transformará um texto HTML em um DOM dynamic com todas as diretivas (aqui: ng-src ) reagindo ao modelo alterar. Um invocaria da seguinte forma: $ compile (imgHtml) ($ scope) e obteria um elemento DOM com todos os limites de evento DOM como resultado. $compile está fazendo uso de $interpolate (entre outras coisas) para fazer o seu trabalho.
  • $interpolate sabe como processar uma string com expressões de interpolação incorporadas, ex .: /path/{{name}}.{{extension}} . Em outras palavras, pode pegar uma string com expressões de interpolação, um escopo e transformá-la no texto resultante. Pode-se pensar no serviço $interpolation como uma linguagem de template muito simples e baseada em string. Dado o exemplo acima, um usuário usaria este serviço como: $interpolate("/path/{{name}}.{{extension}}")($scope) para obter a string path/image.jpg como resultado.
  • $parse é usado por $interpolate para avaliar expressões individuais ( name , extension ) em relação a um escopo. Ele pode ser usado para ler e definir valores para uma determinada expressão. Por exemplo, para avaliar a expressão de name seria necessário: $parse('name')($scope) para obter o valor de “imagem”. Para definir o valor, um faria: $parse('name').assign($scope, 'image2')

Todos esses serviços estão trabalhando juntos para fornecer uma interface do usuário ao vivo no AngularJS. Mas eles operam em diferentes níveis:

  • $parse está preocupado apenas com expressões individuais ( name , extension ). É um serviço de leitura e gravação.
  • $interpolate é somente leitura e se preocupa com strings contendo múltiplas expressões ( /path/{{name}}.{{extension}} )
  • $compile é o coração da maquinaria AngularJS e pode transformar strings HTML (com diretivas e expressões de interpolação) em DOM ao vivo.
 $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 não tem access de escrita às variables ​​$ scope como temos em $ eval e $ parse

$ parse, $ interpolate —> precisa ser injetado mas $ eval não precisa ser injetado no controlador ou onde é usado

$ parse, $ interpolate fornece a function que pode ser avaliada em qualquer contexto, mas $ eval é sempre avaliado em relação ao $ escopo.

$ eval e $ interpola nos bastidores usa apenas $ parse.

Aqui está a explicação fofa.

 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. 
Intereting Posts