Those are all examples of services that aid in AngularJS view rendering (although $parse
and $interpolate
could be used outside of this domain). To illustrate what is the role of each service let's take example of this piece of HTML:
var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'
and values on the scope:
$scope.name = 'image';
$scope.extension = 'jpg';
Given this markup here is what each service brings to the table:
$compile
- it can take the whole markup and turn it into a linking function that, when executed against a certain scope will turn a piece of HTML text into dynamic, live DOM with all the directives (here: ng-src
) reacting to model changes. One would invoke it as follows: $compile(imgHtml)($scope) and would get a DOM element with all the DOM event bounds as a result. $compile
is making use of $interpolate
(among other things) to do its job.$interpolate
knows how to process a string with embedded interpolation expressions, ex.: /path/{{name}}.{{extension}}
. In other words it can take a string with interpolation expressions, a scope and turn it into the resulting text. One can think of the $interpolation
service as a very simple, string-based template language. Given the above example one would use this service like: $interpolate("/path/{{name}}.{{extension}}")($scope)
to get the path/image.jpg
string as a result.$parse
is used by $interpolate
to evaluate individual expressions (name
, extension
) against a scope. It can be used to both read and set values for a given expression. For example, to evaluate the name
expression one would do: $parse('name')($scope)
to get the "image" value. To set the value one would do: $parse('name').assign($scope, 'image2')
All those services are working together to provide a live UI in AngularJS. But they operate on different levels:
$parse
is concerned with individual expressions only (name
, extension
). It is a read-write service.$interpolate
is read only and is concerned with strings containing multiple expressions (/path/{{name}}.{{extension}}
)$compile
is at the heart of AngularJS machinery and can turn HTML strings (with directives and interpolation expressions) into live 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 does not have the write access to the $scope variables as we have in $eval and $parse
$parse , $interpolate --->needs to be injected but $eval need not be injected in the controller or where it is used
$parse , $interpolate give the function which can be evaluated against any context but $eval is always evaluated against $scope.
$eval and $interpolate behind the scenes uses $parse only.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With