Jaka jest różnica między usługami $ parse, $ interpolate i $ compile?

Jaka jest różnica między $parse, $interpolatei $compileusługi? Dla mnie wszyscy robią to samo: weź szablon i skompiluj go do funkcji szablon.

Są to wszystkie przykłady usług, które pomagają w renderowaniu widoku AngularJS (chociaż $parsei $interpolatemogą być używane poza tą domeną). Aby zilustrować rolę każdej usługi, weźmy przykład tego fragmentu HTML:

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

i wartości w zakresie:

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

Biorąc pod uwagę ten znacznik tutaj, każda usługa przynosi tabeli:

• $compile- może zająć cały znacznik i przekształcić go w funkcję łączenia, która po wykonaniu w określonym zakresie zamieni kawałek tekstu HTML w dynamiczną, żywą DOM z wszystkimi dyrektywami (tutaj ng-src:) reagującymi na zmiany modelu. Można by je wywołać w następujący sposób: $ compile (imgHtml) ($ scope) i w wyniku tego uzyskać element DOM ze wszystkimi granicami zdarzenia DOM. $compilewykorzystuje $interpolate(między innymi) swoją pracę.
• $interpolateumie przetwarzać ciąg znaków za pomocą osadzonych wyrażeń interpolacyjnych, np /path/{{name}}.{{extension}}.: Innymi słowy, może wziąć ciąg z wyrażeniami interpolacyjnymi, zasięg i zamienić go w wynikowy tekst. Można myśleć o $interpolationusłudze jako o bardzo prostym języku szablonów opartym na łańcuchach znaków. Biorąc pod uwagę powyższy przykład, można użyć tej usługi, takiej jak: w $interpolate("/path/{{name}}.{{extension}}")($scope)celu otrzymania path/image.jpgciągu.
• $parsesłuży $interpolatedo oceny poszczególnych wyrażeń ( name, extension) względem zakresu. Można go używać zarówno do odczytu, jak i ustawiania wartości dla danego wyrażenia. Na przykład, aby ocenić namewyrażenie, należy zrobić: $parse('name')($scope)uzyskać wartość „image”. Aby ustawić wartość, należy:$parse('name').assign($scope, 'image2')

Wszystkie te usługi współpracują w celu zapewnienia interfejsu użytkownika na żywo w AngularJS. Ale działają na różnych poziomach:

• $parsedotyczy tylko poszczególnych wyrażeń ( name, extension). Jest to usługa do odczytu i zapisu.
• $interpolatejest tylko do odczytu i dotyczy ciągów zawierających wiele wyrażeń ( /path/{{name}}.{{extension}})
• $compile jest sercem maszyny AngularJS i może przekształcać ciągi HTML (z dyrektywami i wyrażeniami interpolacyjnymi) w działający 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 nie ma dostępu do zapisu do zmiennych $ scope, podobnie jak w $ eval i $ parsowaniu

$ parsować, $ interpolować ---> należy wstrzyknąć, ale $ eval nie trzeba wstrzykiwać do kontrolera lub tam, gdzie jest on używany

$ parsuj, $ interpoluj daje funkcję, która może być oceniana w dowolnym kontekście, ale $ eval jest zawsze oceniana względem $ scope.

$ eval i $ interpoluj za sceną używa tylko $ parsowania.

Oto słodkie wyjaśnienie.

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.