|
ng-bindng-bind directive is used to bind a model-value to some DOM element for display. Angular.JS Example<HTML> <HEAD> <title>Angular.JS Controller - PrismoSkills</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> </HEAD> <BODY> <div ng-app="" ng-init="x=5; y=10"> <p>X: <input type="text" ng-model="x"></p> <p>Y: <input type="text" ng-model="y"></p> <p> X: <span ng-bind="x"></span></p> <p> Y: <span ng-bind="y"></span></p> <p> X + Y: <span ng-bind="x * y"></span></p> </div> </BODY> </HTML> Result:X: Y: X: Y: X * Y: Explanation of ng-bind directiveng-bind replaces the inner HTML of the bound element with the expression specified.It may look cumbersome as compared to {{}} but ng-bind is more performant as well as displays better in UI. Display:While AngularJS is loading, the user might see the curly brackets in the html if {{}} are used.Performance:ng-bind places a watcher on the passed variable and is applied only when the passed value actually changes.The brackets on the other hand are dirty checked and refreshed in every $digest, thus making them very slow (around 20% more slower) if plenty of {{}} are used in a page. |
Got a thought to share or found a
bug in the code?
We'd love to hear from you:
Name: | |
Email: | (Your email is not shared with anybody) |
Comment: |
Facebook comments: