Question

以下是我使用的代码示例：

<div ng-class="{alert: ((elements|filter:{hasAlert: true}).length / elements.length) > maxPercentAlerts}">

{{(elements|filter:{hasAlert: true}).length}}

({{Math.floor((elements|filter:{hasAlert: true}).length * 100 / elements.length)}} %)

</div>

如您所见，我需要过滤我的'elements'数组3次。我想使用这种以下代码来增加性能： （这只是我需要的一个例子，而不是真正的代码）

<div some-ng-prop="alertCount=(elements|filter:{hasAlert: true}).length"
    <div ng-class="{alert: (alertCount / elements.length) > maxPercentAlerts}">

    {{alertCount}}

    ({{Math.floor(alertCount * 100 / elements.length)}} %)

</div>

我尝试使用'ng-init'属性处理它：它工作得很好......但是当我的模型发生变化时，值不会更新。

有办法吗？

我试图说清楚，但如果你不明白我的意思，请询问详细信息。

Answer 1

这是一个掠夺者：http://plnkr.co/edit/bNjSnee5UwVjp6wHE6RK

我创建了一个指令：

我使用$parse而不是$eval进行优化。
您提供要观看的集合以及在每次更改时运行的表达式。
它的作用类似于ngInit，只有当集合变脏时才会更新。
我为属性选择了通用名称，您可以将其更改为您喜欢的名称。

<强>指令：

app.directive('watchCollection', function($parse){
  return {
    compile: function(tElm,tAttrs){

      if(! tAttrs.assign) return;

      var assignFn = $parse(tAttrs.assign)

      return function(scope,elm,attrs){      
        scope.$watchCollection(tAttrs.watchCollection , function(val){
          assignFn(scope);
        })
      }
    }
  }
})

<强> HTML ：

<div watch-collection="elements" 
     assign="alertCount=(elements|filter:{hasAlert: true}).length">

Answer 2

Stewie认为这是重复的，我认为不是，但它让我尝试下面的代码，效果很好：

<div ng-class="{alert: (alertCount / elements.length) > maxPercentAlerts}">

{{alertCount = (elements|filter:{hasAlert: true}).length}}

({{Math.floor(alertCount * 100 / elements.length)}} %)

</div>

AngularJS：在模板中绑定变量以提高性能

2 个答案:

我创建了一个指令：