AngularJS 卷曲绑定中的函数每次点击都会触发

Question

我有一个用例，我必须通过触发对 returns 用户名的函数的调用来将值绑定到 table 中的列。 table 行使用 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个例子在Page 1中运行良好，但对于后续页面，大多数情况下都不会触发该功能。

代码 4 :

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

getLogUserName 会针对每个点击事件和操作触发，这不应该是这种情况，因为分页条目可能是每页 100 个并且每次都不会触发该功能。

是否有替代方案可以在不影响性能的情况下实现我期望的功能

Answer 1

对于以下示例，函数在每个摘要循环中至少执行一次：

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

这符合预期。应该注意函数是 idempotent 并且使用最少的计算资源。还要避免调用异步操作的函数。

getLogUserName doesn't trigger any API call, just a normal function which filters username and returns it.

在那种情况下，使用自定义过滤器会更有效率：

<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 上执行过滤器的性能更高，就像 expressions.

的情况一样

有关详细信息，请参阅

AngularJS Developer Guide - Creating Custom Filters

AngularJS 卷曲绑定中的函数每次点击都会触发

AngularJS function inside curly binding triggers for each click

angularjs

angularjs-scope

angularjs-ng-repeat

angularjs-digest