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

var html = '<div ng-click='clickme();'>{{text}}</div>';
$compile(html)($scope);

$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

var string = 'My Name is {{name}}';
$scope.name = 'Manish';
$interpolate(string)($scope); //this will result in My Name is Manish

$parse : This service is used as a getter/setter for single variables only. e.g would be

  
   $scope.text = 'abc';
   $parse('text')($scope);  //this will result in abc
   $parse('text').assign($scope,'xyz');

Below codepen is used demonstrate all 3 in action