I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than {{}} binding.
我在一个角度的演示中，其中一个人提到了ng-bind比{{}绑定更好。
One of the reason, ng-bind put the variable in the watch list and only when there is a model change the data get pushed to view, on the other hand, {{}} will interpolate the expression every time (I guess it is the angular cycle) and push the value, even if the value changed or not.
的一个原因,ng-bind把变量的观察名单,只有当有一个模型改变数据推到视图中,另一方面,{ { } }将插入表达式每次(我猜是角周期)和推动价值,即使价值改变。
Also it is said that, if you have not much data in on the screen you can use {{}} and the performance issue will not be visible. Can someone shed some light on this issue for me?
另外，据说，如果屏幕上没有太多数据，可以使用{{}，性能问题将不可见。有人能给我解释一下这个问题吗?
12 个解决方案
#1
312
If you are not using ng-bind, instead something like this:
如果您不使用ng-bind，那么应该如下:
<div>
Hello, {{user.name}}
</div>
you might see the actual Hello, {{user.name}} for a second before user.name is resolved (before the data is loaded)
在解析user.name(在加载数据之前)之前，您可能会看到实际的Hello， {{user.name}
You could do something like this
你可以这样做
<div>
Hello, <span ng-bind="user.name"></span>
</div>
if that's an issue for you.
如果这对你来说是个问题的话。
Another solution is to use ng-cloak.
另一个解决方案是使用ng-斗篷。
#2
525
Visibility:
可见性:
While your angularjs is bootstrapping, the user might see your placed brackets in the html. This can be handled with ng-cloak. But for me this is a workaround, that I don't need to use, if I use ng-bind.
当您的angularjs正在引导时，用户可能会在html中看到您放置的括号。这可以用防辐射斗篷来处理。但对我来说，这是一个解决方案，我不需要用，如果我用ng-bind的话。
Performance:
性能:
The {{}} is much slower.
{{}的速度要慢得多。
This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.
这个ng绑定是一个指令，它将在已传递的变量上放置一个观察者。因此，只有当传递的值实际发生更改时，才会应用ng-bind。
The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.
另一方面的括号将在每个$digest中进行脏检查和刷新，即使它不是必需的。
I am currently building a big single page app (~500 bindings per view). Changing from {{}} to strict ng-bind did save us about 20% in every scope.$digest.
我目前正在构建一个大的单页应用程序(每个视图大约有500个绑定)。将{{}}更改为严格的ng-bind在每个范围内都节省了大约20%。
Suggestion:
建议:
If you use a translation module such as angular-translate, always prefer directives before brackets annotation.
如果您使用一个翻译模块，比如angular-translate，那么在使用方括号注释之前一定要使用指令。
{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>
{ { '欢迎' |翻译} } = > < span ng-translate =“欢迎”> < / span >
If you need a filter function, better go for a directive, that actually just uses your custom filter. Documentation for $filter service
如果您需要一个过滤器函数，最好使用一个指令，它实际上只使用您的自定义过滤器。文档过滤服务
UPDATE 28.11.2014 (but maybe off the topic):
更新28.11.2014(但可能不涉及主题):
In Angular 1.3x the bindonce functionality was introduced. Therefore you can bind the value of an expression/attribute once (will be bound when != 'undefined').
在角1。3x中引入了bindonce功能。因此，您可以绑定表达式/属性的值一次(将在!= 'undefined'时绑定)。
This is useful when you don't expect your binding to change.
当您不期望绑定更改时，这是有用的。
Usage: Place :: before your binding:
使用地点:地点:
<ul>
<li ng-repeat="item in ::items">{{item}}</li>
</ul>
<a-directive name="::item">
<span data-ng-bind="::value"></span>
Example:
例子:
ng-repeat to output some data in the table, with multiple bindings per row. Translation-bindings, filter outputs, which get executed in every scope digest.
ng-repeat来输出表中的一些数据，每行有多个绑定。翻译绑定、筛选输出，在每个范围摘要中执行。
#3
29
ng-bind is better than {{...}}
ng-bind优于{{{…}
For example, you could do:
例如，你可以这样做:
<div>
Hello, {{variable}}
</div>
This means that the whole text Hello, {{variable}} enclosed by <div> will be copied and stored in memory.
这意味着
If instead you do something like this:
如果你这样做:
<div>
Hello, <span ng-bind="variable"></span>
</div>
Only the value of the value will be stored in memory, and angular will register a watcher (watch expression) which consists of the variable only.
只有值的值将被存储在内存中，而且只有角角将注册一个仅由变量组成的监视程序(监视表达式)。
#4
15
Basically the double-curly syntax is more naturally readable and requires less typing.
基本上，双花括号语法更易于阅读，并且需要更少的输入。
Both cases produce the same output but.. if you choose to go with {{}} there is a chance that the user will see for some milliseconds the {{}} before your template is rendered by angular. So if you notice any {{}} then is better to use ng-bind.
这两种情况产生的结果是一样的。如果选择使用{{}}，用户有可能在以角度呈现模板之前的几毫秒内看到{}。因此，如果您注意到任何{{}，那么最好使用ng-bind。
Also very important is that only in your index.html of your angular app you can have un-rendered {{}}. If you are using directives so then templates, there is no chance to see that because angular first render the template and after append it to the DOM.
同样重要的是，只有在索引中。你的角化应用的html，你可以没有渲染{}。如果您使用的是指示，然后是模板，那么就不可能看到这一点，因为角化首先呈现模板，然后将模板附加到DOM。
#5
4
This is because with {{}} the angular compiler considers both the text node and it's parent as there is a possibility of merging of 2 {{}} nodes. Hence there are additional linkers that add to the load time. Of course for a few such occurrences the difference is immaterial, however when you are using this inside a repeater of large number of items, it will cause an impact in slower runtime environment.
这是因为有了{{{}，角化编译器会同时考虑文本节点和它的父节点，因为有可能合并两个{}节点。因此，有额外的链接器可以增加加载时间。当然，对于一些这样的情况，差异并不重要，但是当您在一个包含大量项目的中继器中使用它时，它将在较慢的运行时环境中造成影响。
#6
2
The reason why Ng-Bind is better because,
Ng-Bind更好的原因是，
When Your page is not Loaded or when your internet is slow or when your website loaded half, then you can see these type of issues (Check the Screen Shot with Read mark) will be triggered on Screen which is Completly wired. To avoid such we should Ng-bind
当你的页面没有被加载，或者你的网络运行缓慢，或者你的网站被加载了一半，你可以看到这些类型的问题(查看带有读标记的屏幕截图)将在完全连接的屏幕上被触发。为了避免这种情况，我们应该约束自己
#7
2
{{...}} is meant two-way data binding. But, ng-bind is actually meant for one-way data binding.
{ {…}是指双向数据绑定。但是，ng-bind实际上是用于单向数据绑定的。
Using ng-bind will reduce the number of watchers in your page. Hence ng-bind will be faster than {{...}}. So, if you only want to display a value and its updates, and do not want to reflect its change from UI back to the controller, then go for ng-bind. This will increase the page performance and reduce the page load time.
使用ng-bind将减少您页面中观察者的数量。因此，ng-bind比{{{}要快。因此，如果您只想显示一个值和它的更新，而不想反映它从UI到控制器的变化，那么就使用ng-bind。这将增加页面性能并减少页面加载时间。
<div>
Hello, <span ng-bind="variable"></span>
</div>
#8
1
ng-bind has its problems too.When you try to use angular filters, limit or something else, you maybe can have problem if you use ng-bind. But in other case, ng-bind is better in UX side.when user opens a page, he/she will see (10ms-100ms) that print symbols ( {{ ... }} ), that's why ng-bind is better.
ng-bind也有其问题。当你尝试使用角滤波器，极限或其他东西，你可能会有问题如果你使用ng-bind。但是在其他情况下，ng-bind在UX方面更好。当用户打开一个页面时，他/她将看到(10ms-100ms)打印符号({…})，这就是为什么ng-bind更好。
#9
1
There is some flickering problem in {{ }} like when you refresh the page then for a short spam of time expression is seen.So we should use ng-bind instead of expression for data depiction.
在{{{{}}}}中有一些闪烁的问题，当您刷新页面时，就会看到一个很短的时间表达式垃圾邮件。所以我们应该使用ng-bind而不是用表达式来描述数据。
#10
0
ng-bind is also safer because it represents html as a string.
ng-bind也更安全，因为它将html表示为字符串。
So for example, '<script on*=maliciousCode()></script>' will be displayed as a string and not be executed.
例如，''将显示为字符串，不会执行。
#11
0
According to Angular Doc:
Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading... it's the main difference...
根据棱角Doc:由于ngBind是一个元素属性，它使得用户在页面加载时看不到绑定……主要的区别…
Basically until every dom elements not loaded, we can not see them and because ngBind is attribute on the element, it waits until the doms come into play... more info below
基本上，直到每个dom元素都没有加载，我们才能看到它们，因为ngBind是元素的属性，所以它要等到dom发挥作用……更多的信息在下面
ngBind
- directive in module ng
The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
ngBind -模块ng中的指令ngBind属性告诉AngularJS将指定的HTML元素的文本内容替换为给定表达式的值，并在表达式的值改变时更新文本内容。
Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.
通常，您不会直接使用ngBind，而是使用像{{{expression}这样的双花括号标记，它很相似，但不那么冗长。
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
如果在AngularJS编译模板之前，浏览器暂时以原始状态显示模板，最好使用ngBind而不是{{{expression}}。由于ngBind是一个元素属性，所以在页面加载时，用户看不到绑定。
An alternative solution to this problem would be using the ngCloak directive. visit here
这个问题的另一个解决方案是使用ng斗篷指令。访问这里
for more info about the ngbind visit this page: https://docs.angularjs.org/api/ng/directive/ngBind
有关ngbind的更多信息请访问这个页面:https://docs.angularjs.org/api/ng/directive/ngBind
You could do something like this as attribute, ng-bind:
你可以像这样做属性，ng-bind:
<div ng-bind="my.name"></div>
or do interpolation as below:
或做插值如下:
<div>{{my.name}}</div>
or this way with ng-cloak attributes in AngularJs:
或者用AngularJs中的ng-隐身属性:
<div id="my-name" ng-cloak>{{my.name}}</div>
ng-cloak avoid flashing on the dom and wait until all be ready! this is equal to ng-bind attribute...
不要在dom上闪烁，等一切准备好!这等于ng-bind属性…
#12
0
You can refer to this site it will give you a explanation which one is better as i know {{}} this is slower than ng-bind.
你可以参考这个网站，它会给你一个更好的解释，因为我知道{{}这比ng-bind要慢。
http://corpus.hubwiz.com/2/angularjs/16125872.html refer this site.
http://corpus.hubwiz.com/2/angularjs/16125872.html这个网站。
#1
312
If you are not using ng-bind, instead something like this:
如果您不使用ng-bind，那么应该如下:
<div>
Hello, {{user.name}}
</div>
you might see the actual Hello, {{user.name}} for a second before user.name is resolved (before the data is loaded)
在解析user.name(在加载数据之前)之前，您可能会看到实际的Hello， {{user.name}
You could do something like this
你可以这样做
<div>
Hello, <span ng-bind="user.name"></span>
</div>
if that's an issue for you.
如果这对你来说是个问题的话。
Another solution is to use ng-cloak.
另一个解决方案是使用ng-斗篷。
#2
525
Visibility:
可见性:
While your angularjs is bootstrapping, the user might see your placed brackets in the html. This can be handled with ng-cloak. But for me this is a workaround, that I don't need to use, if I use ng-bind.
当您的angularjs正在引导时，用户可能会在html中看到您放置的括号。这可以用防辐射斗篷来处理。但对我来说，这是一个解决方案，我不需要用，如果我用ng-bind的话。
Performance:
性能:
The {{}} is much slower.
{{}的速度要慢得多。
This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.
这个ng绑定是一个指令，它将在已传递的变量上放置一个观察者。因此，只有当传递的值实际发生更改时，才会应用ng-bind。
The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.
另一方面的括号将在每个$digest中进行脏检查和刷新，即使它不是必需的。
I am currently building a big single page app (~500 bindings per view). Changing from {{}} to strict ng-bind did save us about 20% in every scope.$digest.
我目前正在构建一个大的单页应用程序(每个视图大约有500个绑定)。将{{}}更改为严格的ng-bind在每个范围内都节省了大约20%。
Suggestion:
建议:
If you use a translation module such as angular-translate, always prefer directives before brackets annotation.
如果您使用一个翻译模块，比如angular-translate，那么在使用方括号注释之前一定要使用指令。
{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>
{ { '欢迎' |翻译} } = > < span ng-translate =“欢迎”> < / span >
If you need a filter function, better go for a directive, that actually just uses your custom filter. Documentation for $filter service
如果您需要一个过滤器函数，最好使用一个指令，它实际上只使用您的自定义过滤器。文档过滤服务
UPDATE 28.11.2014 (but maybe off the topic):
更新28.11.2014(但可能不涉及主题):
In Angular 1.3x the bindonce functionality was introduced. Therefore you can bind the value of an expression/attribute once (will be bound when != 'undefined').
在角1。3x中引入了bindonce功能。因此，您可以绑定表达式/属性的值一次(将在!= 'undefined'时绑定)。
This is useful when you don't expect your binding to change.
当您不期望绑定更改时，这是有用的。
Usage: Place :: before your binding:
使用地点:地点:
<ul>
<li ng-repeat="item in ::items">{{item}}</li>
</ul>
<a-directive name="::item">
<span data-ng-bind="::value"></span>
Example:
例子:
ng-repeat to output some data in the table, with multiple bindings per row. Translation-bindings, filter outputs, which get executed in every scope digest.
ng-repeat来输出表中的一些数据，每行有多个绑定。翻译绑定、筛选输出，在每个范围摘要中执行。
#3
29
ng-bind is better than {{...}}
ng-bind优于{{{…}
For example, you could do:
例如，你可以这样做:
<div>
Hello, {{variable}}
</div>
This means that the whole text Hello, {{variable}} enclosed by <div> will be copied and stored in memory.
这意味着
If instead you do something like this:
如果你这样做:
<div>
Hello, <span ng-bind="variable"></span>
</div>
Only the value of the value will be stored in memory, and angular will register a watcher (watch expression) which consists of the variable only.
只有值的值将被存储在内存中，而且只有角角将注册一个仅由变量组成的监视程序(监视表达式)。
#4
15
Basically the double-curly syntax is more naturally readable and requires less typing.
基本上，双花括号语法更易于阅读，并且需要更少的输入。
Both cases produce the same output but.. if you choose to go with {{}} there is a chance that the user will see for some milliseconds the {{}} before your template is rendered by angular. So if you notice any {{}} then is better to use ng-bind.
这两种情况产生的结果是一样的。如果选择使用{{}}，用户有可能在以角度呈现模板之前的几毫秒内看到{}。因此，如果您注意到任何{{}，那么最好使用ng-bind。
Also very important is that only in your index.html of your angular app you can have un-rendered {{}}. If you are using directives so then templates, there is no chance to see that because angular first render the template and after append it to the DOM.
同样重要的是，只有在索引中。你的角化应用的html，你可以没有渲染{}。如果您使用的是指示，然后是模板，那么就不可能看到这一点，因为角化首先呈现模板，然后将模板附加到DOM。
#5
4
This is because with {{}} the angular compiler considers both the text node and it's parent as there is a possibility of merging of 2 {{}} nodes. Hence there are additional linkers that add to the load time. Of course for a few such occurrences the difference is immaterial, however when you are using this inside a repeater of large number of items, it will cause an impact in slower runtime environment.
这是因为有了{{{}，角化编译器会同时考虑文本节点和它的父节点，因为有可能合并两个{}节点。因此，有额外的链接器可以增加加载时间。当然，对于一些这样的情况，差异并不重要，但是当您在一个包含大量项目的中继器中使用它时，它将在较慢的运行时环境中造成影响。
#6
2
The reason why Ng-Bind is better because,
Ng-Bind更好的原因是，
When Your page is not Loaded or when your internet is slow or when your website loaded half, then you can see these type of issues (Check the Screen Shot with Read mark) will be triggered on Screen which is Completly wired. To avoid such we should Ng-bind
当你的页面没有被加载，或者你的网络运行缓慢，或者你的网站被加载了一半，你可以看到这些类型的问题(查看带有读标记的屏幕截图)将在完全连接的屏幕上被触发。为了避免这种情况，我们应该约束自己
#7
2
{{...}} is meant two-way data binding. But, ng-bind is actually meant for one-way data binding.
{ {…}是指双向数据绑定。但是，ng-bind实际上是用于单向数据绑定的。
Using ng-bind will reduce the number of watchers in your page. Hence ng-bind will be faster than {{...}}. So, if you only want to display a value and its updates, and do not want to reflect its change from UI back to the controller, then go for ng-bind. This will increase the page performance and reduce the page load time.
使用ng-bind将减少您页面中观察者的数量。因此，ng-bind比{{{}要快。因此，如果您只想显示一个值和它的更新，而不想反映它从UI到控制器的变化，那么就使用ng-bind。这将增加页面性能并减少页面加载时间。
<div>
Hello, <span ng-bind="variable"></span>
</div>
#8
1
ng-bind has its problems too.When you try to use angular filters, limit or something else, you maybe can have problem if you use ng-bind. But in other case, ng-bind is better in UX side.when user opens a page, he/she will see (10ms-100ms) that print symbols ( {{ ... }} ), that's why ng-bind is better.
ng-bind也有其问题。当你尝试使用角滤波器，极限或其他东西，你可能会有问题如果你使用ng-bind。但是在其他情况下，ng-bind在UX方面更好。当用户打开一个页面时，他/她将看到(10ms-100ms)打印符号({…})，这就是为什么ng-bind更好。
#9
1
There is some flickering problem in {{ }} like when you refresh the page then for a short spam of time expression is seen.So we should use ng-bind instead of expression for data depiction.
在{{{{}}}}中有一些闪烁的问题，当您刷新页面时，就会看到一个很短的时间表达式垃圾邮件。所以我们应该使用ng-bind而不是用表达式来描述数据。
#10
0
ng-bind is also safer because it represents html as a string.
ng-bind也更安全，因为它将html表示为字符串。
So for example, '<script on*=maliciousCode()></script>' will be displayed as a string and not be executed.
例如，''将显示为字符串，不会执行。
#11
0
According to Angular Doc:
Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading... it's the main difference...
根据棱角Doc:由于ngBind是一个元素属性，它使得用户在页面加载时看不到绑定……主要的区别…
Basically until every dom elements not loaded, we can not see them and because ngBind is attribute on the element, it waits until the doms come into play... more info below
基本上，直到每个dom元素都没有加载，我们才能看到它们，因为ngBind是元素的属性，所以它要等到dom发挥作用……更多的信息在下面
ngBind
- directive in module ng
The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
ngBind -模块ng中的指令ngBind属性告诉AngularJS将指定的HTML元素的文本内容替换为给定表达式的值，并在表达式的值改变时更新文本内容。
Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.
通常，您不会直接使用ngBind，而是使用像{{{expression}这样的双花括号标记，它很相似，但不那么冗长。
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
如果在AngularJS编译模板之前，浏览器暂时以原始状态显示模板，最好使用ngBind而不是{{{expression}}。由于ngBind是一个元素属性，所以在页面加载时，用户看不到绑定。
An alternative solution to this problem would be using the ngCloak directive. visit here
这个问题的另一个解决方案是使用ng斗篷指令。访问这里
for more info about the ngbind visit this page: https://docs.angularjs.org/api/ng/directive/ngBind
有关ngbind的更多信息请访问这个页面:https://docs.angularjs.org/api/ng/directive/ngBind
You could do something like this as attribute, ng-bind:
你可以像这样做属性，ng-bind:
<div ng-bind="my.name"></div>
or do interpolation as below:
或做插值如下:
<div>{{my.name}}</div>
or this way with ng-cloak attributes in AngularJs:
或者用AngularJs中的ng-隐身属性:
<div id="my-name" ng-cloak>{{my.name}}</div>
ng-cloak avoid flashing on the dom and wait until all be ready! this is equal to ng-bind attribute...
不要在dom上闪烁，等一切准备好!这等于ng-bind属性…
#12
0
You can refer to this site it will give you a explanation which one is better as i know {{}} this is slower than ng-bind.
你可以参考这个网站，它会给你一个更好的解释，因为我知道{{}这比ng-bind要慢。
http://corpus.hubwiz.com/2/angularjs/16125872.html refer this site.
http://corpus.hubwiz.com/2/angularjs/16125872.html这个网站。