HomeAdvancedAngularJS – $compile $parse $interpolate

AngularJS – $compile $parse $interpolate

AngularJS provide three useful services which it uses internally., $compile, $parse, $interpolate. These service are mainly used to evaluate expression and rendering UI.

$compile: This service converts a html string in a fully functional DOM element. The resulting DOM would have all linking, events working just like a DOM element. This uses $parse internally for evaluating expressions. e.g usage of $compile would be
[js]
var html = ‘<div ng-click=’clickme();’>{{text}}</div>’;
$compile(html)($scope);
[/js]
$compile is mostly used inside custom directives and doesn’t have much use outside.

$interpolate : This service is used to evaluate angular expressions. You can run an entire string against a scope, and interpolate will give the result. e.g would be
[js]
var string = ‘My Name is {{name}}’;
$scope.name = ‘Manish’;
$interpolate(string)($scope); //this will result in My Name is Manish
[/js]

$parse : This service is used as a getter/setter for single variables only. e.g would be
[js]
$scope.text = ‘abc’;
$parse(‘text’)($scope); //this will result in abc
$parse(‘text’).assign($scope,’xyz’);
[/js]

Below codepen is used demonstrate all 3 in action

%d bloggers like this: