3

I've two codes in my HTML structure.

First one is:

<!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 another is: 

<!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 are giving the same output then, where the difference lies?

Improve this question
0

2 Answers 2

Reset to default
0

When you are using 

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

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

Its better to use 

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

As this removes the problem. the ng-bind will show the value,only when the value is changed. There are so many explanations for the difference you can check

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

The similarity between this two is

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

Interpolation Directive

This uses {{}} inside that you can have an expression with scope variables which are placed in respective scope..

ng-bind

Sometimes angular shows {{}} while rendering a page which is un-compiled angular content, ng-bind does avoid that. By using this you need use to add using ng-cloak directive.

Improve this answer

1 Comment

does it helped you??

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.