The ng-bind-template
attribute specifies that the element
text should be replaced with the template in ng-bind-template.
Unlike ng-bind the ng-bind-template can contain multiple {{
}}
expressions. (This is required since some HTML elements
can not have SPAN elements such as TITLE, or OPTION to name a few.)
<ANY ng-bind-template="{string}"> ... </ANY>
<ANY class="ng-bind-template: {string};"> ... </ANY>
ng-bind-template – {string} –
template of form {{ expression }} to eval.
Try it here: enter text in text box and watch the greeting change.
<script> function Ctrl($scope) { $scope.salutation = 'Hello'; $scope.name = 'World'; } </script> <div ng-controller="Ctrl"> Salutation: <input type="text" ng-model="salutation" ng-model-instant><br> Name: <input type="text" ng-model="name" ng-model-instant><br> <pre ng-bind-template="{{salutation}} {{name}}!"></pre> </div>
it('should check ng-bind', function() { expect(using('.doc-example-live').binding('salutation')). toBe('Hello'); expect(using('.doc-example-live').binding('name')). toBe('World'); using('.doc-example-live').input('salutation').enter('Greetings'); using('.doc-example-live').input('name').enter('user'); expect(using('.doc-example-live').binding('salutation')). toBe('Greetings'); expect(using('.doc-example-live').binding('name')). toBe('user'); });