避免在Angular.js界值的不必要的评价 [英] Avoid unnecessary evaluation of bound values in Angular.js

问题描述

有一个angular.js指令，呈现为一个表。大部分时间，表很小，所以性能不成问题。

但有时，表中有许多行（例如千），所以渲染每一行是昂贵的，因为每一个绑定值似乎两次评估，有很多约束值。和角度看来，以评估这个表了很多，才发现其中的所有值都没有改变，因此不必重新呈现，不必要瘫痪的应用程序。

例如，整个表似乎重新重估时 $ scope.showMenu 变化对的mouseenter / 鼠标离开。

有没有办法告诉角度，整个表是依赖于一些其他的价值，比如， $ scope.checksum 因此，如果不改变的话，整个表不发生变化？

 ＆LT; D​​IV CLASS =头NG-的mouseenter =showMenu =真正的NG-鼠标离开=showMenu =假＆GT;
   只显示下拉菜单将鼠标悬停在标题的时候 -   - ＆GT;＆LT！;
   ＆LT;跨度NG-IF =showMenu级=下拉菜单＆GT; ...菜单内容放在这里...＆LT; / SPAN＆GT;   ＆所述; H2＆GT; {{的getTitle（）}}＆下; / H2＆GT;
   ＆LT; P＆GT; {{说明}}＆LT; / P＆GT;
＆LT; / DIV＆GT;＆LT;表＆gt;
   ＆LT; TR NG重复=，在rowKeys键＆GT;
      ＆LT; TD标题={{getRowItem（键）| pretty＆GT; {{getRowItem（键）|缩写}}＆LT; / TD＆GT;
      ＆LT; TD＆GT; {{getRowValue（键）|号码＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
在此输入code
   ＆LT; / TR＆GT;
＆LT; /表＆gt;
 




解决方案

如果您正在使用角1.3并在表中的数据在其他时刻不更新你必须尝试绑定一次。

 ＆LT; TR NG重复=键:: rowKeys＆GT;
      ＆LT; TD＆GT; {{::关键}}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
 

此外NG-的mouseenter和NG-鼠标离开产生更多$观察家，我建议你使用CSS规则，使菜单中的这种影响。

Have an angular.js directive that renders as a table. Most of the time, the table is small, so performance is not an issue.

But sometimes, the table has many rows (e.g. thousands), so rendering every row is expensive, as each bound value appears to be evaluated twice, and there are a lot of bound values. And Angular seems to evaluate this table a lot, only to find that all of the values in it are unchanged and thus need not be rerendered, paralyzing the application needlessly.

For instance, the entire table appears to be re-revaluated when the value of $scope.showMenu changes on mouseenter / mouseleave.

Is there a way to tell Angular that the entire table is dependent on some other value, say, $scope.checksum thus if that doesn't change, then the entire table doesn't change?

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

解决方案

If you're using Angular 1.3 and the data in your table is not updated in other moment you must try bind once.

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

Also ng-mouseenter and ng-mouseleave generate more $watchers, I recommend you use CSS rules to make this effect in your menu.

这篇关于避免在Angular.js界值的不必要的评价的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！