ngBindTemplate

- directive in module ng

The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }} expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

Directive Info

This directive executes at priority level 0.

Usage

as attribute:

<ANY
  ng-bind-template="string">
...
</ANY>

Arguments

Param	Type	Details
ngBindTemplate	string	template of form `{{` `expression` `}}` to eval.

Example

Try it here: enter text in text box and watch the greeting change.

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.salutation = 'Hello';
      $scope.name = 'World';
    }]);
</script>
<div ng-controller="ExampleController">
 <label>Salutation: <input type="text" ng-model="salutation"></label><br>
 <label>Name: <input type="text" ng-model="name"></label><br>
 <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>

it('should check ng-bind', function() {
  var salutationElem = element(by.binding('salutation'));
  var salutationInput = element(by.model('salutation'));
  var nameInput = element(by.model('name'));

  expect(salutationElem.getText()).toBe('Hello World!');

  salutationInput.clear();
  salutationInput.sendKeys('Greetings');
  nameInput.clear();
  nameInput.sendKeys('user');

  expect(salutationElem.getText()).toBe('Greetings user!');
});

Load online demo