Angularjs 悬停在元素上时绑定表达式并提高性能

在我的Angularjs应用程序中，我需要在元素悬停处显示一些内容（

数据内容

）

<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>

{{month.monthname}}
{{x.weekname}
{{weekDate.win}

数据内容将包含角度绑定，它将包含许多表达式，并且将非常大。所以，如果我绑定了所有这些，那么它将导致性能问题，因为它位于ng repeat中（大约有100个循环），所以所有数据的绑定将非常缓慢，并且有很多DOM元素

---

那么，有没有什么方法可以在用户在td元素上悬停时绑定数据悬停，以便只在需要时进行绑定，而DOM元素将更少。还是有任何技术可以提高性能？

如果不查看每个弹出窗口的绑定数据集/数量，我无法确定它是否会导致性能问题。但是，使用angular减少DOM负载的一种简单方法是使用，而不是使用show/hide（就像大多数库使用afaik一样），ng if实际上是根据条件从DOM中添加和删除项，而不是简单地将显示设置为hidden等，从而大大减少了angular在任何给定点必须执行的绑定量

ng重复中的一个简单示例如下（改编自）：

盘旋
老鼠在我身上。

---

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

好的，很好！！。。但在我的例子中，我想根据是否悬停相同的元素来设置元素的数据内容。但您所展示的示例是基于其他元素的，只需使用mouseenter和ng if即可。但是，如何附加和删除基于相同元素的元素的数据内容？在您的示例中，exp1不是weekDate的属性吗？我的假设是，在repeat中，您希望在hover上显示当前迭代中项目的扩展属性列表，所以将鼠标悬停在item2上，在弹出的item2.n中显示。实际上，我猜问题是您希望使用引导显示弹出窗口，对吗？我的建议是，在我的示例中，不要使用bootstrap，而是在ng repeat中将span设置为弹出窗口（以获得ng if的性能优势）。我将在另一个数组的数据内容中使用表达式，但它将基于weekDate.win的值。我想使用引导显示弹出窗口。还有别的选择吗？

<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>