AngularJS: API: ng/directive/ngBindTemplate


ngBindTemplate

  1. - 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="">
...
</ANY>

Arguments

ParamTypeDetails
ngBindTemplatestring

template of form {{ expression }} to eval.

Example

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

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