what is the functional difference between ng-bind and ng-template?

Question

Consider the following code - it uses ng-bind to print the 2 models in an expression defined at the element level.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example16-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="ngBindHtmlExample">
    <div ng-controller="ngBindHtmlCtrl">
    <input type="text" ng-model='asd'/>
    <input type="text" ng-model='asdasd'/><br>
    <span ng-bind='asd +" "+ asdasd'> </span>
   <p ng-bind-html="myHTML"></p>
  </div>
</body>
</html>

now consider this code with ng-template which does exactly the same but only uses {{ }} in the expression

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example15-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>



</head>
<body ng-app="">
    <script>
    function Ctrl($scope) {
      $scope.salutation = 'Hello';
      $scope.name = 'World';
    }
  </script>
  <div ng-controller="Ctrl">
   Salutation: <input type="text" ng-model="salutation"><br>
   Name: <input type="text" ng-model="name"><br>
   <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
  </div>
</body>
</html>

What is the key purpose of the 2 directives and best practices for their cases ?

Check out this SO question: [why ng-bind is better than {{}} in angular?](http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular) — KayakDave, May 27 '14 at 14:44
@KayakDave thanks for the suggestion but the question differce from the above mentioned, as it focus on the functional difference between the ng-template and ng-bind — Abhishek Jain, May 28 '14 at 05:21

score 0 · Answer 1 · edited May 23 '17 at 12:14

The difference between the two has been neatly discussed here.

In short you can't use ng-bind to bind multiple values to a single html element. But you can use ng-bind-template to do that. Of course you can make ng-bind work like ng-bind-template as you have done in the question. The main difference being the execution of multiple expressions. Also ng-bind is faster and since there is rarely any need to use multiple expressions, using ng-bind would be preferable.

what is the functional difference between ng-bind and ng-template?

1 Answers1