angularjs - Angularjs重用计算值

Question

我需要使用计算值来隐藏元素并在模板中执行其他操作。

<button ng-hide="expensive()" ng-click="foo()">foo</button>
<button ng-show="expensive() && otherFunction()" ng-click="bar()">bar</button>
<span ng-show="expensive()">Bas</span>

这会导致每个循环执行expensive()多次。$digest我想重用它的结果，但它需要为每个摘要执行——而不是每个摘要多次。

是否有任何重用函数结果的最佳实践需要重新计算每个摘要？

* update * 此功能适用于一个巨大的对象，它的属性可以通过页面上的大量输入字段和子公式来更改。它有多个一对多关系。如果我必须向每个字段添加事件/ngChanges，并且我只错过一个，这将无法正常工作。

Answer 1

您并没有真正向我们提供足够的信息来为您提供适合您情况的最佳选择。

一般而言，最好的选择是让任何导致返回值expensive()更改的交互更新 $scope.property 并在您的视图中使用它。

换句话说，除非您正在设置诸如 ng-click 之类的绑定，否则不要在视图中使用范围内的函数。相反，只要它们需要更新并直接引用它们，就可以更新范围上的属性。

注意：这可能会诱使您使用 $watch... 不要那样做。有更便宜、更有效的方法来触发更新，例如 ngChange 或其他此类事件。

Answer 2

你有几个选择：

1. 使昂贵的() 成为 $q 的承诺。Angular 模板理解 $q 承诺并相应地解决它们
2. 在运行函数时存储该值，如果该值存在，则在函数中首先返回它。如果要刷新缓存值，可以向其添加刷新参数。
3. 如果这些值在计算后真的永远不会改变，你可以把它们放在一个解析中
4. 如果这些值是某些 DOM 工作的结果，请创建一个指令来执行此操作并 $emit 对父范围的实际更改。

Answer 3

尝试这个。

<button ng-hide="result" ng-click="foo()">foo</button>
<button ng-show="result && otherFunction()" ng-click="bar()">bar</button>
<span ng-show="expensive()">Bas</span>

控制器：

$scope.expensive = function() {
    ... do stuff ...
    $scope.result = ...;
    return $scope.result;
}