Saturday, 14 November 2015

ng-bind-template

What is ng-bind-template:ng-bind-template used to bind multiple angularJS expression, within {{ }} ..
Description of ng-bind-template:ng-bind-template bind multiple angularJS expression dynamically , within {{ }} .In ng-bind we have restriction/limit with angularJS expression(we can bind one expression per directive or can say one ng-bind directive used for one expression. ), but ng-bind template do not follow this restrictions . This directive has priority 0..
Syntax of ng-bind-template:
<element ng-bind-template="{{expression1}}{{expression2}}">

</element>
or

<div ng-bind-template="{{expression1}}{{expression2}}"></div>
How to Use ng-bind-template/ng-bind-template Example::
 Example 1:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr" ng-init="myexpression = 'Hello AngularJS.';yourexpression = 'This is Example Of AngularJS ng-bind-template.'">
        <div>
             <div ng-bind-template="{{myexpression}}{{yourexpression}}"></div>
        </div>
    </div>
</div>
  O/P :   Hello AngularJS. This is Example Of AngularJS ng-bind-template.
Example 2:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr" ng-init="mycount=1">
        <div>
            <div ng-bind-template="{{myexpression}}{{yourexpression}}"></div>
        </div>
    </div>
</div>
   O/P :   Hello AngularJS. This is Example Of AngularJS ng-bind-template.
<script>
    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
        $scope.myexpression = 'Hello AngularJS.';
        $scope.yourexpression = 'This is Example Of AngularJS ng-bind-template.';
    });

</script>

No comments :

Post a comment