Результат кэша в 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

Одним из способов достижения этой цели в вашем примере использовать ngChange. При изменении входного значения свяжите функцию, которая запускается, которая вызывает тяжелую функцию.

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

Затем в HTML, связывают изменение нг:

<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; 
}; 

И в пользовательском интерфейсе, изменяет классы и вывод данных путем привязки кэша result:

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

На стороне нет, если у вас есть функция, которая должна выполняться html только один раз, вы можете использовать one time binding, встроенный в angularJs. https://docs.angularjs.org/guide/expression#one-time-binding

Answer 2

Вы можете использовать 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