Javascript 角度冗余数据绑定?
我是目前公司的新员工,正在重构前任的代码Javascript 角度冗余数据绑定?,javascript,angularjs,Javascript,Angularjs,我是目前公司的新员工,正在重构前任的代码 <th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes" data-ng-bind="headline.name"> {{headline}} </th> 我认为您正在尝试将数据绑定到表头,您可以尝试使用以下方法: <th ng-repeat="(key,headline) in model.headlines"
<th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes" data-ng-bind="headline.name">
{{headline}}
</th>
我认为您正在尝试将数据绑定到表头,您可以尝试使用以下方法:
<th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes"">
<div ng-class="additional styling" data-ng-bind="headline.name">
</div>
</th>
{{…}
在初始化时有一点性能开销,但在实践中可以忽略不计。实际上,不同之处在于ngbind
总是替换元素的内容,其中使用{{…}
只设置元素的一部分,以便仍然可以追加或前置到元素
最后,它比任何东西都更受欢迎,我倾向于使用ngbind
,如果我知道这就是我想要的元素内容。使用ngbind而不是inplace{…}有一个主要的好处,那就是在angular插入并替换所有内容之前,防止页面看起来到处都像地狱一样(这在慢速设备(平板电脑、手机等)上非常明显)
但是,您可以通过将ng斗篷类添加到您不希望显示的元素来绕过它,直到angular准备好处理模板,然后它将移除ng斗篷,所有内容都将可见
(当你切换到一个有一些重图表和网格的页面时,它在平板电脑上显示了一些非常难看的{{}})
另外,关于部分渲染和性能的另一个答案也是正确的。我发现您可以使用冗余方式提供调试信息
在问题的第一个例子中,
如果对象没有headline.name属性,
但是一个标题对象,
然后打印json对象信息
这有助于跟踪json对象是否存在,
已经存在并且已经设置了哪些属性,
这有助于追踪有时可能出错的地方。是的,但是数据ng bind=“headline.name”比{{headline.name}更好吗?我在某个地方读到过{headline.name}是您通常用来绑定数据的东西,看到绑定被写出来是相当罕见的,但是感谢您的建议,我没有考虑将数据绑定标记移动到内部对象与元素内容中的表达式相比,ng bind
的可读性降低,抵消了微不足道的性能增益。
<th ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes"">
<div ng-class="additional styling" data-ng-bind="headline.name">
</div>
</th>