Clever Geek Handbook

Difference between two angular js bindings?

I have two codes in my HTML structure.

The first:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app>
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

and the other:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Both give the same result then where does the difference lie?

+3


source to share


2 answers


When you use

<p>{{name}}</p>

While angularjs is loading you can see your brackets on the page. You can use ng-cloak to not see the user {{name}}.

Better to use



<p ng-bind="name"></p>

How does this fix the problem. ng-bind will show the value only when the value is changed. There are so many explanations for the differences that you can check

AngularJS: Why is ng-bind better than {{}} in angular?

Difference between ng-bind and {{}} interpolation in Angular

0


source


Similarities between the two

  • Used for one way binding.
  • they are used to bind variables to data in the view.

Interpolation Directive

In this case, it is used {{}}

where you can have an expression with scope variables that are placed in the appropriate scope.



ng-binding

Sometimes angular shows {{}}

when rendering a page that is not compiled by angular ng-bind

does not allow it. Using this you need to use to add using a directive ng-cloak

.

0


source






More articles:


All Articles