Question

有一个angular.js指令作为表呈现。大多数情况下，表格很小，因此性能不是问题。

但有时，表有很多行（例如数千个），因此渲染每一行都很昂贵，因为每个绑定值似乎都被计算两次，并且有很多绑定值。 Angular似乎对这个表进行了很多评估，结果发现它中的所有值都没有变化，因此不需要重新渲染，不必要地使应用程序陷入麻烦。

例如，当$scope.showMenu / mouseenter上mouseleave的值发生变化时，整个表似乎会重新评估。

有没有办法告诉Angular整个表依赖于其他一些值，比如$scope.checksum因此如果不改变，那么整个表不会改变？

<div class="header" ng-mouseenter="showMenu=true" ng-mouseleave="showMenu=false">
   <!-- show dropdown menu only when hovering over the header -->      
   <span ng-if="showMenu" class="menu dropdown" >  ... menu content goes here...</span>

   <h2>{{getTitle()}}</h2> 
   <p>{{description}}</p>
</div>

<table>
   <tr ng-repeat="key in rowKeys">  
      <td title="{{getRowItem(key)|pretty">{{getRowItem(key)|abbreviated}}</td>
      <td>{{getRowValue(key)|number</td>
  </tr>
enter code here
   </tr>
</table>

Answer 1

如果您正在使用Angular 1.3并且表中的数据在其他时刻未更新，则必须尝试绑定一次。

    <tr ng-repeat="key in ::rowKeys">
      <td>{{::key}}</td>
    </tr>

另外ng-mouseenter和ng-mouseleave会产生更多的观察者，我建议你使用CSS规则在你的菜单中产生这种效果。

避免在Angular.js中对绑定值进行不必要的评估

1 个答案: