В чем разница между службами $ parse, $ interpolate и $ compile?

В чем разница между $parse, $interpolateи $compileуслуги? Для меня все они делают одно и то же: взять шаблон и скомпилировать его в шаблон-функцию.

Это все примеры сервисов, которые помогают в рендеринге представлений AngularJS (хотя $parseи $interpolateмогут использоваться за пределами этого домена). Чтобы проиллюстрировать роль каждого сервиса, давайте возьмем пример этого фрагмента HTML:

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

и значения в области:

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

Учитывая эту разметку, вот что каждый сервис приносит на стол:

• $compile- он может взять всю разметку и превратить ее в функцию связывания, которая при выполнении в определенной области преобразует фрагмент текста HTML в динамический DOM со всеми директивами (здесь ng-src:), реагирующими на изменения модели. Можно вызвать его следующим образом: $ compile (imgHtml) ($ scope) и получить в результате элемент DOM со всеми границами событий DOM. $compileиспользует $interpolate(среди прочего), чтобы сделать свою работу.
• $interpolateзнает , как обрабатывать строку со встроенными интерполяционных выражений, напр .: /path/{{name}}.{{extension}}. Другими словами, он может взять строку с выражениями интерполяции, область видимости и превратить ее в результирующий текст. Можно думать о $interpolationсервисе как об очень простом, основанном на строках языке шаблонов. Учитывая приведенный выше пример, можно использовать этот сервис, например: $interpolate("/path/{{name}}.{{extension}}")($scope)получить path/image.jpgстроку в результате.
• $parseиспользуется $interpolateдля оценки отдельных выражений ( name, extension) в контексте. Он может использоваться как для чтения, так и для установки значений для данного выражения. Например, чтобы оценить nameвыражение, нужно сделать: $parse('name')($scope)получить значение «изображение». Чтобы установить значение, нужно сделать:$parse('name').assign($scope, 'image2')

Все эти службы работают вместе, чтобы обеспечить живой интерфейс в AngularJS. Но они работают на разных уровнях:

• $parseкасается только отдельных выражений ( name, extension). Это сервис чтения-записи.
• $interpolateтолько для чтения и касается строк, содержащих несколько выражений ( /path/{{name}}.{{extension}})
• $compile находится в центре машин AngularJS и может превращать строки HTML (с директивами и выражениями интерполяции) в живой 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 не имеет доступа для записи к переменным $ scope, как у нас в $ eval и $ parse

$ parse, $ interpolate ---> должен быть введен, но нет необходимости вводить $ eval в контроллер или где он используется

$ parse, $ interpolate дают функцию, которая может быть оценена по любому контексту, но $ eval всегда оценивается по $ scope.

$ eval и $ interpolate за кадром используют только $ parse.

Вот милое объяснение.

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.