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

excellence-social-linkdin
excellence-social-facebook
excellence-social-instagram
excellence-social-skype