Thursday, February 18, 2016

What is difference between angular expression {{}} and ‘ng-bind’ and which is better?

The expression {{}} binds data to HTML same like ng-bind directive. But ng-bind is better approach than {{}}. Followings are few of the considerations.


  • Key difference is {{ }} can flash on page load while ‘ng-bind’ hides the expression until it is displayed correctly.
  • The Angular JS registers a watcher for the variable being used in ng-bind.
  • The ‘ng-bind’ stores only value of the variable in memory.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

    <div ng-app="" data-ng-init="var1=5;var2=7">

        <p>Result = <span data-ng-bind="var1+var2"></span></p>
        <div>Result =  {{(var1+var2)}}</div>

    </div>

</body>
</html>

No comments:

Post a Comment