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.
<ANY
ng-bind-template="">
...
</ANY>
| Param | Type | Details |
|---|---|---|
| ngBindTemplate | string |
template of form {{ expression }} to eval. |
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">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><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!');
});