AngularJS: удалить $watch из ng-repeat

Я создал отчет, который использует набор вложенных директив ng-repeat для создания огромной таблицы. Он хорошо работает для построения таблицы, но после этого производительность прокрутки сильно снижается - я предполагаю, что это связано с тем, что должно быть большое количество часов, созданных ng-repeats.

Отчет нужно создать только один раз, после чего он становится статическим. Мне не нужно постоянно следить за данными.

У меня есть два вопроса:

A) можно ли как-то увидеть список всех переменных, которые Angular в данный момент наблюдает?

РЕДАКТИРОВАТЬ: Этот пост был большим подспорьем в обучении тому, как проводить бенчмаркинг

Б) Можно ли как-нибудь сказать Angular остановить все часы, которые он делает? Я видел много сообщений об отмене часов, которые человек настраивает самостоятельно, но это нативные директивы, я не уверен, как бы я их использовал.

Я бы предпочел иметь переменную, о которой я могу сказать «если правда, то делать все часы, если нет, то не смотреть», или функцию, которая просто говорит «запускать часы» и «останавливать часы».

Я настроил очень хорошую службу наблюдения за DOM, которая может сказать, когда все ng-повторы выполнились, поэтому я могу знать, когда я хочу прекратить наблюдение.

Это сама таблица. Помимо 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>

javascript angularjs watch
person dgig    schedule 12.08.2015    source источник
comment
это может быть 90 x 300. Это не похоже на огромную таблицу, но все же немного замедляет работу.   -  person dgig    schedule 13.08.2015
comment
Я видел гораздо большие столы, возможно, здесь происходит что-то еще. Можете ли вы вставить часть своего кода?   -  person Mathew Berg    schedule 13.08.2015
comment
Я не решаюсь публиковать все это, потому что там много чего можно потерять. Много форматирования и тому подобного. Безусловно, многое происходит. Я думаю, если бы был ответ на часть А моего вопроса, это помогло бы мне сравнить вещи.   -  person dgig    schedule 13.08.2015
comment
@MathewBerg Я добавил таблицу, я не уверен, что это на что-то указывает.   -  person dgig    schedule 13.08.2015

Ответы (1)


arrow_upward
25
arrow_downward

Я бы порекомендовал проверить синтаксис одинарной привязки, который они представили в 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>
person wesww    schedule 12.08.2015
comment
это помогло вам решить вашу проблему с $watch @dgig? Я надеюсь, что это так! - person wesww; 18.08.2015
comment
Что ж, это было отличное предложение, но оно не совсем решило мою проблему, потому что мне нужен был способ запускать и останавливать часы. Но для установки одних часов это было здорово, поэтому вы получили так много голосов. Спасибо за помощь! - person dgig; 21.08.2015
comment
Это старо, но я пересмотрел это, применив все, включая включение редактирования, что немного помогло, сократило время загрузки примерно на 40%. Спасибо еще раз. - person dgig; 15.06.2016