缓存结果在Angular JS中

Question

在Angular JS应用程序中，我需要向用户显示javascript函数的结果（在我的示例中为heavyFunction），这取决于用户输入，因此我使用{{}}来显示结果。

我只需要在某些条件下显示它，所以我也在ng-show和ng-class指令中调用这个函数。

<span ng-show="heavyFunction() > 0" ng:class="{true:'red', false:'blue'}[heavyFunction() > 5]"> {{heavyFunction()}} </span>

问题是我三次调用函数，而不是一次。 Angular JS中只调用一次此函数的最佳做法是什么？

Plunker：https://plnkr.co/edit/9r5AlA3RbtZLseOCOzPX?p=preview

Answer 1

您可以使用 ngBind

喜欢这个

ng-bind="total=heavyFunction()"

HTML

<p>a + b:</p> <span ng-bind="total=heavyFunction()" ng-show="total > 0" ng-class="{true:'red', false:'blue'}[total > 5]"> {{total}} </span>

的 DEMO

Answer 2

在您的示例中实现此目的的一种方法是使用ngChange。 在输入值更改时，绑定一个被触发的函数，该函数调用重函数。

$scope.numberChanged = function() {
    $scope.heavyFunction();
};

然后在html中绑定ng更改：

<input type="number" ng-model="a" ng-change="numberChanged()"></input>
<input type="number" ng-model="b" ng-change="numberChanged()"></input>

然后确保重函数缓存结果：

$scope.heavyFunction = function() {
    $scope.result = $scope.a + $scope.b;
};

在ui中，通过绑定缓存的result来更改类和显示输出：

<p>a + b:</p> <span ng-show="result > 0" ng:class="{true:'red', false:'blue'}[result > 5]"> {{result}} </span>

另一方面，如果你有一个必须由html执行一次的函数，你可以使用内置于angularJs中的one time binding。 https://docs.angularjs.org/guide/expression#one-time-binding