web-dev-qa-db-fra.com

Quelle est la différence entre les services $ parse, $ interpolate et $ compile?

Quelle est la différence entre $parse, $interpolate et $compile prestations de service? Pour moi, ils font tous la même chose: prendre template et le compiler en template-function.

javascriptangularjsangular-services
180
Stepan Suvorov

Ce sont tous des exemples de services qui aident au rendu de la vue AngularJS (bien que $parse Et $interpolate Puissent être utilisés en dehors de ce domaine). Pour illustrer le rôle de chaque service, prenons un exemple de ce morceau de HTML:

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

et valeurs sur la portée:

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

Étant donné ce balisage, voici ce que chaque service apporte à la table:

  • $compile - il peut prendre tout le balisage et le transformer en une fonction de liaison qui, lorsqu'elle est exécutée sur une certaine étendue, transformera un morceau de texte HTML en dynamique, DOM en direct avec toutes les directives (ici: ng-src) Réagissant aux modifications du modèle. On l'invoquerait comme suit: $ compile (imgHtml) ($ scope) et obtiendrait un élément DOM avec toutes les limites d'événement DOM en conséquence. $compile Utilise $interpolate (Entre autres) pour faire son travail.
  • $interpolate Sait comment traiter une chaîne avec des expressions d'interpolation incorporées, par exemple: /path/{{name}}.{{extension}}. En d'autres termes, il peut prendre une chaîne avec des expressions d'interpolation, une étendue et la transformer en texte résultant. Le service $interpolation Peut être considéré comme un langage de modèle très simple, basé sur des chaînes. Étant donné l'exemple ci-dessus, on utiliserait ce service comme ceci: $interpolate("/path/{{name}}.{{extension}}")($scope) pour obtenir la chaîne path/image.jpg En conséquence.
  • $parse Est utilisé par $interpolate Pour évaluer des expressions individuelles (name, extension) par rapport à une étendue. Il peut être utilisé pour les valeurs lire et définir pour une expression donnée. Par exemple, pour évaluer l'expression name, on ferait: $parse('name')($scope) pour obtenir la valeur "image". Pour définir la valeur que l’on ferait: $parse('name').assign($scope, 'image2')

Tous ces services travaillent ensemble pour fournir une interface utilisateur en direct dans AngularJS. Mais ils opèrent à différents niveaux:

  • $parse Ne concerne que les expressions individuelles (name, extension). C'est un service en lecture-écriture.
  • $interpolate Est en lecture seule et concerne les chaînes contenant plusieurs expressions (/path/{{name}}.{{extension}})
  • $compile Est au cœur des machines AngularJS et peut transformer des chaînes HTML (avec des directives et des expressions d'interpolation) en DOM live.
463
pkozlowski.opensource
$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’a pas l’accès en écriture aux variables $ scope comme nous l’avons dans $ eval et $ parse

$ parse, $ interpolate ---> doit être injecté mais $ eval n'a pas besoin d'être injecté dans le contrôleur ou à l'endroit où il est utilisé

$ parse, $ interpolate donne la fonction qui peut être évaluée dans n'importe quel contexte mais $ eval est toujours évalué dans $ scope.

$ eval et $ interpolate en coulisse utilisent $ parse seulement.

3
Dhana

Voici l'explication mignonne.

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