ng-bind,ng-bind-template,ng-bind-html

Difference between ng-bind,ng-bind-template,ng-bind-html in angularjs

by Akhil Yalla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
 <div ng-app = ""> 
 <div ng-controller="foo">
 
<div style='color:red;font-weight:bold;'>ng-bind Output</div>  <div ng-bind='name'> </div><br/>
  
<div style='color:red;font-weight:bold;'>ng-bind-template Output</div>  <div ng-bind-template='{{name}} {{link}}'></div><br/><br/>
 
<div style='color:red;font-weight:bold;'>ng-bind-html Output</div>  <div ng-bind-html="link"></div>

</div><br/><br/>

 
<b>Difference Explaination:</b><br/>
 
 <div style='color:red;font-weight:bold;'>ng-bind</div>
ngBind is used to replace the text content of the specified HTML element with 
the value of a given expression.<br/> 
But you can't use multiple values to bind in 
a single html element.<br/> <br/>



<div style='color:red;font-weight:bold;'>ng-bind-template</div>
 So for binding multiple values we can use ng-bind-template<br/><br/>
 


<div style='color:red;font-weight:bold;'>
ng-bind-html</div>

For rendering html template we can use ng-bind-html.

JavaScript

angular.module('myapp', ['ngSanitize'])
  .controller('foo', function($scope) {
    $scope.link = "<a href='http://akhilreddyyalla.blogspot.in' target='_blank'><b>Visit Blog for more info</b></a>";
    $scope.name="<a href='http://akhilreddyyalla.blogspot.in' target='_blank'><b>Visit Blog for more info</b></a>";
  });

angular.bootstrap(document, ['myapp']);