В чем разница между услугами $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.