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

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

Ответ 1

Это все примеры служб, которые помогают в рендеринге 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-строки (с директивами и интерполяционными выражениями) в live DOM.

Ответ 2

$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'

$интерполяция не имеет права на запись в переменные $scope, как в $eval и $parse

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

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

$eval и $интерполяция за кулисами использует только $parse.