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

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>

如您所见，我需要过滤我的“元素”数组 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

Stewie 建议它是重复的，我认为不是，但它让我尝试了以下代码，效果很好：

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

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

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

</div>

Answer 2

这里是一个笨蛋：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">