angularjsng-bind-htmlng-bind

Difference between ngBind, ngBindHtm & ngBindTemplate in Angular JS


I'm new to Angular JS.

Can any one of you guys explain me the difference between ngBind,ngBindHtm & ngBindTemplate in Angular JS with an example?


Solution

  • ng-bind

    ngBind is used to replace the text content of the specified HTML element with the value of a given expression. For example if you have an html as follows <b ng-bind="name"></b> and in your controller give a value for name as $scope.name = "John". This will result in <b>John</b>. But you can't use multiple values to bind in a single html element. For example

    $scope.first_name = "John";
    $scope.second_name = "D";
    <b ng-bind="first_name second_name"></b> 
    

    This will not give the result as <b>John D</b> only bind first_name. So for binding multiple values we can use ng-bind-template

    ng-bind-template

     $scope.first_name = "John";
     $scope.second_name = "D";
    
    <b ng-bind-template="{{first_name second_name}}"></b>
    

    This results in <b>John D</b> But you can't render an html tag in this both. For rendering html template we can use ng-bind-html.

    ng-bind-html

    $scope.name = "<b>John</b>";
    <div ng-bind-html="name"></div>
    

    This will result in John instead of showing <b>John</b> . That means it renders the html instead of showing html tag.

    Click this link to view example