¿Cuál es la diferencia entre los servicios $ parse, $ interpolate y $ compile?


Respuestas:


464

Esos son todos ejemplos de servicios que ayudan en AngularJS la representación de vista (aunque $parsey $interpolatepodría ser utilizado fuera de este dominio). Para ilustrar cuál es el papel de cada servicio, tomemos un ejemplo de esta pieza de HTML:

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

y valores en el alcance:

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

Dado este marcado, esto es lo que cada servicio trae a la mesa:

  • $compile- puede tomar todo el marcado y convertirlo en una función de enlace que, cuando se ejecuta contra un determinado alcance, convertirá un fragmento de texto HTML en dinámico, DOM vivo con todas las directivas (aquí ng-src:) que reaccionan a los cambios del modelo. Uno lo invocaría de la siguiente manera: $ compile (imgHtml) ($ scope) y como resultado obtendría un elemento DOM con todos los límites del evento DOM. $compileestá haciendo uso de$interpolate (entre otras cosas) para hacer su trabajo.
  • $interpolatesabe cómo procesar una cadena con expresiones de interpolación embebidos, ej .: /path/{{name}}.{{extension}}. En otras palabras, puede tomar una cadena con expresiones de interpolación, un alcance y convertirla en el texto resultante. Uno puede pensar en el $interpolationservicio como un lenguaje de plantilla muy simple, basado en cadenas. Dado el ejemplo anterior, se usaría este servicio como: $interpolate("/path/{{name}}.{{extension}}")($scope)para obtener la path/image.jpgcadena como resultado.
  • $parsese utiliza $interpolatepara evaluar expresiones individuales ( name, extension) contra un ámbito. Se puede usar para leer y establecer valores para una expresión dada. Por ejemplo, para evaluar la nameexpresión se haría: $parse('name')($scope)obtener el valor de "imagen". Para establecer el valor uno haría:$parse('name').assign($scope, 'image2')

Todos esos servicios están trabajando juntos para proporcionar una interfaz de usuario en vivo en AngularJS. Pero operan en diferentes niveles:

  • $parse se refiere solo a expresiones individuales (name , extension). Es un servicio de lectura y escritura.
  • $interpolate es de solo lectura y se refiere a cadenas que contienen múltiples expresiones (/path/{{name}}.{{extension}} )
  • $compile está en el corazón de la maquinaria de AngularJS y puede convertir cadenas HTML (con directivas y expresiones de interpolación) en DOM en vivo.

11
Bien explicado. ¡Votado! :)
AlwaysALearner

2
Agradable. ¿Puede proporcionar ejemplos de usos y resultados para cada uno de ellos? Todavía no está 100% claro para mí y creo que eso ayudaría mucho. ¡Gracias!
Alejandro García Iglesias

2
Excelente de hecho. Aquí puede encontrar algunos ejemplos más del uso de la vida real (y también es un buen artículo simple sobre cómo acelerar Angular): speeding-up-angular-js-with-simple-optimizations "Por ejemplo, en lugar de representar una navegación global usando ng-repeat, podríamos crear nuestra propia navegación usando el proveedor $ interpolate para representar nuestra plantilla contra un Objeto y convertirla en nodos DOM ".
Nadav Lebovitch

Gran explicación He estado buscando en todas $interpolatepartes lo que realmente está en AnjularJS y finalmente obtuve una respuesta compacta e informativa.
Damith

El ejemplo se ha utilizado de manera tan efectiva para explicar los tres objetos de servicio. Necesitamos más de este tipo de explicaciones claras y básicas en varias áreas de js angular para que sea más accesible para los principiantes.
Reyes

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 no tiene acceso de escritura a las variables de $ alcance como tenemos en $ eval y $ parse

$ parse, $ interpolar ---> necesita ser inyectado pero $ eval no necesita ser inyectado en el controlador o donde se usa

$ parse, $ interpolar dan la función que puede evaluarse en cualquier contexto, pero $ eval siempre se evalúa en $ alcance.

$ eval y $ interpolate detrás de escena usan solo $ parse.


0

Aquí está la linda explicación.

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.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.