AngularJS:从ng-repeat中删除$ watch

Question

我已经构建了一个报告,它使用一组嵌套的ng-repeat指令来创建一个巨大的表.它可以很好地构建表格,但在此之后,滚动性能受到很大影响 - 我认为这是由ng-repeats创建的大量手表所必需的.

报告只需要构建一次,然后是静态的.我不需要不断观察数据.

我有两个问题:

A)无论如何看到Angular目前正在观看的所有变量的列表？

编辑:这篇文章是学习如何基准测试的一个很好的帮助

B)无论如何要告诉Angular停止它正在做的所有手表吗？我看过很多关于取消手表的帖子,其中一个是自己设置的,但这些都是原生指令,我不知道我是如何利用它们的.

我的偏好是有一个变量,我可以说"如果真的,然后做所有的手表,如果没有,那么不要看"或只是说"开始观看"和"停止观看"的功能.

我已经建立了一个非常好的DOM观看服务,它可以告诉所有ng-repeats何时执行,所以我可以知道我何时想停止观看.

这是表本身.除了tk-ng-repeat-completed之外,其他"tk-"属性仅用于数据,而不是实际的指令.

<div class="table-responsive">

    <table tk-sticky-column id="records" class="table table-striped table-hover table-condensed">

        <!-- tbody[n] -->
        <tbody class="dataset" ng-repeat="dataset in report.data track by $index" tk-ng-repeat-completed>
            <!-- row[0] -->
            <tr class="headline">
                <!-- header[0] label -->
                <th class="headline" style="background-color:#042E34;">
                    <div style="width:200px;"><h4>{{report.labels.y[$index]}}</h4></div>
                </th>
                <!-- header[n] label -->
                <th ng-repeat="x_label in report.labels.x" tk-ng-repeat-completed
                    class="datapoint date"
                    tk-raw-data="{{x_label}}">
                    <em><small>{{x_label}}</small></em></th>
                <!-- header[last] space for addition @todo remove this, add during calculations -->
                <th class="date"></th>  
            </tr>
            <!-- row[n] -->
            <tr ng-repeat="(key, datapoints) in dataset" tk-metric-key="{{key}}">
                <!-- column[0] label -->
                <td tk-metric-key="{{key}}" 
                    tk-calc="{{report.labels.data[key].calc}}"
                    class="rowdesc begin">{{key}}</td>
                <!-- column[n] data -->
                <td ng-repeat="datapoint in datapoints track by $index" tk-ng-repeat-completed
                    ypos="{{$parent.$parent.$parent.$index}}" xpos="{{$index}}" tk-metric-key="{{key}}"
                    class="datapoint"
                    tk-raw-data="{{datapoint}}">
                        {{datapoint}}</td>
            </tr>

        </tbody>

    </table>

</div>

Answer 1

我建议检查它们在1.3中引入的单绑定语法,如果你的版本大于或等于那个.它工作得很好,实现起来非常简单.这是一个例子:

普通语法,为每个变量创建一个观察者:

<div ng-repeat="foo in vm.bar">
  {{foo}}
</div>

单绑定语法,在重复内部的嵌套变量上没有观察者:

<div ng-repeat="foo in vm.bar">
  {{::foo}}
</div>

编辑:

我忘了提到如果你的数据在第一次填充之后根本不会改变(例如来自$ http.get),你也可以在顶级ng-repeat上使用单绑定语法:

<div ng-repeat="foo in ::vm.bar">
  {{::foo}}
</div>