角度冗余数据绑定？答案

【问题标题】：Angular redundant databinding?角度冗余数据绑定？
【发布时间】：2015-01-09 02:54:20
【问题描述】：

我是目前公司的新人，正在重构我前任的代码。

<th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes" data-ng-bind="headline.name">
    {{headline}}
</th>

我发现删除 {{headline}} 不会改变任何事情（或者在对象的内容中添加任何内容，例如文本也没有任何作用）。

删除data-ng-bind="headline.name" 并将{{headline}} 替换为{{headline.name}} 使我能够像在任何其他html 对象中一样添加更多内容。

由于我是 Angular 新手，我认为我的前任非常称职，与“inline-version”{{headline.name}}相比，data-ng-bind="headline.name" 有什么好处吗？

我想为对象添加额外的样式并将另一个 div 放入其中会很棒，但我不能用 data-ng-bind 来做，因为它会吃掉内容并替换它。

这个改动会不会搞砸什么？

我很困惑，为什么经验更丰富的前任会以一种一开始就不那么敏捷的方式编写代码，所以我想仔细检查一下，我没有忽略任何东西。

<th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes"">
    <div ng-class="additional styling">
        {{headline.name}}
    </div>
</th>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

{{...}} 在初始化时有一点性能开销，但实际上可以忽略不计。实际上，区别在于ng-bind 将始终替换元素的内容，而{{...}} 您只是设置其中的一部分，因此您仍然可以附加或预先添加到元素。

最后它比任何东西都更偏好，如果我知道这就是我想要的元素内容，我倾向于使用ng-bind。

【讨论】：

与元素内容 IMO 中的表达式相比，ng-bind 的可读性降低，足以抵消微小的性能提升。

【解决方案2】：

我认为您正在尝试将数据绑定到表头，您可以尝试使用它吗：

   <th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes"">
        <div ng-class="additional styling" data-ng-bind="headline.name">
        </div>
    </th>

【讨论】：

是的，但是 data-ng-bind="headline.name" 比 {{headline.name}} 更好吗？我在某处读到 {{headline.name}} 是您通常用来绑定数据的东西，并且看到写出的绑定相当罕见，但是感谢您的建议，我没有考虑过移动数据绑定标记到内部对象

【解决方案3】：

使用 ng-bind 代替原地 {{...}} 有一个主要好处，它可以防止页面在 angular 启动并替换所有内容之前到处看起来像地狱般的 {{}}（这可能非常在慢速设备（平板电脑、手机等）上可见。

但是，您可以通过将 ng-cloak 类添加到您不希望显示的元素来解决它，直到 angular 准备好处理模板，然后它将删除 ng-cloak 并且所有内容都将变得可见。

（当您切换到包含大量图表和网格的页面时，我们就遇到过这种情况，它在平板电脑上到处都是非常丑陋的 {{}}）。

除此之外，关于部分渲染和性能的其他答案也是正确的。

【讨论】：

【解决方案4】：

我发现你可以使用冗余的方式来提供调试信息。

在问题的第一个示例中，如果对象没有 header.name 属性，而是一个标题对象，然后打印 json 对象信息。

这可以帮助追踪 json 对象，已经存在并且已经设置了哪些属性，这有助于追踪有时可能出现问题的地方。

【讨论】：