AngularJS ：为什么 ng-bind 在 angular 中比 {{}} 更好？

javascript angularjs ng-bind

2022-08-29 23:26:34

我在其中一个角度演示中，会议中提到的一个人比绑定更好。ng-bind{{}}

其中一个原因，将变量放在观察列表中，只有当模型更改时，数据才会被推送到查看，另一方面，每次都会插入表达式（我猜是角度循环）并推送值，即使值是否更改。ng-bind{{}}

另外，据说，如果屏幕上的数据不多，则可以使用，并且性能问题将不可见。有人能为我阐明这个问题吗？{{}}

答案 1

能见度：

当你的angularjs正在引导时，用户可能会在html中看到你放置的括号。这可以通过 .但对我来说，这是一种解决方法，如果我使用，我不需要使用。ng-cloakng-bind

性能：

速度要慢得多。{{}}

这是一个指令，并将在传递的变量上放置一个观察程序。因此，仅当传递的值实际更改时，才会适用。ng-bindng-bind

另一方面，括号将在每个，即使没有必要，也会被脏检查和刷新。$digest

我目前正在构建一个大型单页应用程序（每个视图约 500 个绑定）。从{{}}更改为严格确实节省了我们大约20%的费用。ng-bindscope.$digest

建议：

如果使用平移模块（如角度平移），请始终优先使用带括号批注的指令。

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

如果你需要一个过滤器函数，最好选择一个指令，它实际上只使用你的自定义过滤器。$filter服务文档

更新28.11.2014（但可能偏离主题）：

在Angular 1.3x中引入了该功能。因此，您可以绑定表达式/属性的值一次（当！= 'undefined' 时将被绑定）。bindonce

当您不希望绑定发生更改时，这很有用。

用法：装订前放置：::

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

例：

ng-repeat以输出表中的一些数据，每行有多个绑定。转换绑定，筛选器输出，在每个作用域摘要中执行。

答案 2

如果您没有使用，而是使用类似如下的内容：ng-bind

<div>
  Hello, {{user.name}}
</div>

您可能会在解析之前（在加载数据之前）看到实际值一秒钟Hello, {{user.name}}user.name

你可以做这样的事情

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

如果这对你来说是一个问题。

另一种解决方案是使用ng-斗篷。

AngularJS ： 为什么 ng-bind 在 angular 中比 {{}} 更好？