Функция AngularJS внутри фигурных триггеров для каждого клика - PullRequest
Новая
       65

Функция AngularJS внутри фигурных триггеров для каждого клика

1 голос
/ 02 ноября 2019

У меня есть случай использования, когда мне нужно привязать значение к столбцу в таблице, вызвав вызов функции, которая возвращает имя пользователя. Строки таблицы зацикливаются с использованием ng-repeat-start, а для отображения записей используется разбиение на страницы.

Код 1: 

<td class="col-sm-2 col-md-2 col-lg-2">
  {{::getLogUserName(site,key,innerKey)}}
</td>

Код 2: 

 <td class="col-sm-2 col-md-2 col-lg-2"
     ng-init="userName = getLogUserName(site,key,innerKey)">
   {{userName}}
 </td>

Код 3: 

<td class="col-sm-2 col-md-2 col-lg-2"
    ng-init="userName = ::getLogUserName(site,key,innerKey)">
  {{userName}}
</td>

Приведенные выше 3 примера отлично работают на странице 1, но для последующих страниц функция не срабатывает в большинстве сценариев.

Код 4: 

<td class="col-sm-2 col-md-2 col-lg-2">
  {{getLogUserName(site,key,innerKey)}}
</td>

getLogUserName срабатывает при каждом событии и действии щелчка, что не должно иметь место, поскольку записей разбиения на страницы может быть 100 на страницу и запуск функции каждый раз не ожидается.

Есть ли альтернатива для достижения ожидаемой функциональности без ущерба для производительности

1 Ответ

1 голос
/ 03 ноября 2019

В следующем примере функция выполняется не реже одного раза в каждом цикле дайджеста: 

<td class="col-sm-2 col-md-2 col-lg-2">
  {{getLogUserName(site,key,innerKey)}}
</td>

Это соответствует ожиданиям. Следует позаботиться о том, чтобы эта функция была идемпотентной и использовала минимальные вычислительные ресурсы. Также избегайте функций, которые вызывают асинхронные операции.

getLogUserName не вызывает какой-либо вызов API, просто обычная функция, которая фильтрует имя пользователя и возвращает его.

В этом случае было бы более эффективно использовать пользовательский фильтр: 

<td class="col-sm-2 col-md-2 col-lg-2">
  {{ userArr | customFilter : site : key : innerKey }}
</td>

app.filter("customFilter", function() {
    return function(userArr, site, key, innerKey) {
        // filter code
        // ...
        return result;
    };
})

В шаблонах фильтры выполняются только после изменения их входных данных. Это более производительно, чем выполнение фильтра для каждого $digest, как в случае с выражениями .

Для получения дополнительной информации см.

...