AngularJS: 从 ng-repeat 中删除 $watch

Question

我构建了一个报告，它使用一组嵌套的 ng-repeat 指令来创建一个巨大的 table。构建 table 效果很好，但在那之后，滚动性能受到很大影响 - 我认为这是由于 ng-repeats 创建的大量手表造成的。

报表只需构建一次，然后就是静态的。我不需要一直看数据。

我有两个问题：

A) 是否可以查看 Angular 当前正在观察的所有变量的列表？

EDIT: This post was a great help in learning how to benchmark

B) 有没有办法告诉 Angular 停止它正在做的所有监视？我看过很多关于取消自己设置的手表的帖子，但这些是本机指令，我不确定如何利用它们。

我的偏好是有一个我可以说 "if truthy, then do all watches, if not, then do not watch" 的变量或一个只说 "start watches" 和 "stop watches".

的函数

我设置了一个非常好的 DOM 监视服务，它可以告诉我所有的 ng-repeats 何时执行，所以我可以知道我什么时候想停止监视。

这是 table 本身。除了 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>

AngularJS: 从 ng-repeat 中删除 $watch

AngularJS: Remove $watch from ng-repeat

javascript

angularjs

watch

编辑：