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

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

3 178
javascript angularjs angular-services

3 ответа:

это все примеры услуг, которые помогают в представлении 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) в отношении области. Он может быть использован как читать и set значения данное выражение. Например, чтобы оценить name выражение можно было бы сделать: $parse('name')($scope) чтобы получить значение "изображение". Чтобы установить значение, нужно сделать:$parse('name').assign($scope, 'image2')

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

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

$interpolate не имеет доступа на запись к переменным $scope, как у нас в $eval и $parse

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

$разобрать , $интерполировать предоставить функции, которые могут быть оценены в отношении любой ситуации, но $eval-это всегда оцениваются от $охвата.

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

6

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

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