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 Suraj is {{name}}';

$scope.name = 'Suraj';

$interpolate(string)($scope); //this will result in My Name is Suraj

$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');