绑定表达式提高性能

在我Angularjs应用程序，我有一个要求，以显示对元素的悬停某些内容（data-content）。绑定表达式提高性能

<div class="col-md-4" ng-repeat="month in datelist" on-finish-render="CalLoaded"> 
    <table class="calender" > 
     <caption><span>{{month.monthname}}</span></caption> 
     <thead> 
      <tr> 
       <th ng-repeat="x in week" >{{ x.weekname }}</th> 
      </tr> 
     </thead>  
     <tbody> 
      <tr ng-repeat="monthDate in month.dates"> 
       <td ng-repeat="weekDate in monthDate.wout" ng-attr-id="{{weekDate.id}}" b-color="{{weekDate.color}}" ng-click="Open(weekDate.id);" data-hover="cal-tooltip" data-content='<table><tr><td<td>{{exp1}}</td><td ........ /td></tr></table>'> 
       {{weekDate.win}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

的数据内容将包含角结合，它会包含许多表达和将是大的。因此，如果我将所有这些绑定在一起，那么它会导致性能问题，因为它在ng-repeat（大约有100个循环）内部，所以绑定所有数据悬停将会很慢，并且会有很多DOM元素。

那么，有其中在用户该TD元素上悬停，以便结合在需要时和DOM元素会少将仅做我可以绑定数据悬停的任何方法。或者是否有任何技术来提高性能？

来源

2015-08-19 Navaneet

它是否会导致性能问题，我不能告诉你确切没有看到的每弹出绑定数据集/卷。但是，使用的角度，以减少对DOM的加载一个简单的方法是使用ng-if而不是显示/隐藏（因为大多数图书馆做据我所知），NG-如果实际上增加和基于条件的DOM，而不是删除的项目简单的设置显示隐藏等，从而大大减少角度必须在任何给定点做的约束量。

这样的一个NG重复内一个简单的例子如下（改编自here）：

http://plnkr.co/edit/S4qijIUlh2nd2Y4vQ547?p=preview

<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false"> 
    <span ng-if="item.showEdit">Hovered</span> 
    Mouse over me. 
    </div>

然后简单地增加一个显示/隐藏布尔值，每件商品的列表来隔离悬停实例。这也可以通过相对简单的指令来实现。

来源

2015-08-19 09:22:39 Swires

Ok.Nice !! ..但在我的情况，我想设置数据内容基于相同的元素是否悬停的元素。但是你显示的例子是基于其他元素的，只需使用mouseenter和ng-if即可完成。但是如何附加和删除基于相同元素的元素的数据内容是否被悬停？ – Navaneet

在你的例子中是exp1不是weekDate的属性？我的推测是，在重复的内部，你想显示当前迭代中悬停的项目的扩展属性列表，所以悬停在item2上，在弹出的item2.n中显示。 – Swires

其实我猜这个问题是你想用bootstrap显示弹出对吗？我的建议是，你不要在我的例子中使用的引导和风格跨度为弹出，而不是（获得NG-IF的性能优势） – Swires

绑定表达式提高性能

回答

相关问题