Angular 个元素绑定到相同的函数。避免对每个摘要进行多次调用

Question

鉴于以下情况：

<div data-ng-repeat="val in vals">
      <div data-ng-class:{'myClass':isEngineOn(val)}>
          <span data-ng-show="isEngineOn(val)">yeah it's on</span>
          <span data-ng-show="!isEngineOn(val)"> standby</span>
          <button data-ng-disabled="isEngineOn(val)">Start engine</button>
      <div>
</div>

isEngineOn 随着我从服务器收到的 websocket 消息而变化。

有没有办法避免在每个摘要中针对重复中的每个值评估 isEngineOn 4 次？比如初始化一个变量什么的？

Answer 1

是的，只需在控制器中有一个变量来保存结果，并在您从服务器收到更新时更新该变量：

在你的控制器中：

$scope.engineOn = isEngineOn();//also make sure to update from server whenever you need

请注意，如果您的 isEngineOn() 函数不再从视图中调用，则它不需要在范围内，可以将其声明为常规变量。

HTML:

<div data-ng-class="{'myClass':engineOn}">
      <span data-ng-show="engineOn">yeah it's on</span>
      <span data-ng-show="!engineOn"> standby</span>
<div>

编辑 2：如您所说，ng-init 没有更新摘要，所以我采用了第二种方法。

我走了很长一段路，为你的值创建了一个相应的数组，你可以从中读到：

  <div data-ng-repeat="val in vals" >
      <div data-ng-class="{'myClass':enginOn[val]}">
          <span data-ng-show="engineOn[val]">yeah it's on</span>
          <span data-ng-show="!engineOn[val]"> standby</span>
          <button data-ng-disabled="isEngineOn(val)">Start engine</button>
      </div>
</div>

Fiddle.

Answer 2

您可以将 watcher 设置为变量，当您从服务器收到答案时会发生变化，例如：

scope.$watch(function(){ return <var that changes>; }, function(oldv, newv){
    if(oldv !== newv)
        scope.isEngineOn = <Calculate here>;
});

然后使用：

<span data-ng-show="isEngineOn">

Answer 3

您可以使用简单的 CSS 来做到这一点，而无需调用 span 中的函数。我认为这比 JavaScript 解决方案更有效，尤其是当您重复许多元素时，因为您可以保存绑定：

<div data-ng-repeat="val in vals">
    <div data-ng-class:{'myClass':isEngineOn(val)}>
        <span class="showWhenOn">yeah it's on</span>
        <span class="showWhenOff"> standby</span>
        <button onclick="alert('Starting...')">Start engine</button>
    </div>
</div>

CSS:

.showWhenOn {
    display: none;
}

.myClass .showWhenOn {
    display: inline;
}

.myClass .showWhenOff {
    display: none;
}

.myClass button {
    pointer-events: none;
    color: silver;
}

JS Fiddle

Angular 个元素绑定到相同的函数。避免对每个摘要进行多次调用

Angular elements bound to same function. Avoid multiple call on each digest

javascript

angularjs

angularjs-digest