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的执行。我想重用它的结果，但需要为每个摘要执行 - 每次摘要不要多次。

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

*更新* 此函数适用于大型对象，其属性可以通过页面上的许多输入字段和子配方来更改。它有多个一对多的关系。如果我必须向每个字段添加事件/ ngChanges，如果我只错过一个，这将无法正常工作。

Answer 1

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

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

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

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

Answer 2

您有几个选择：

使昂贵的（）成为$ q的承诺。 Angular模板理解$ q promises并相应地解决它们
在运行函数时存储该值，如果该值存在则返回该函数中的第一件事。如果要刷新缓存的值，可以向其添加flush参数。
如果计算出的值真的永远不会改变，你可以将它们放在解决方案中
如果这些值是某些DOM工作的结果，请创建一个指令来执行此操作并$ $对父作用域发出实际更改。

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

Angularjs重用计算值

3 个答案: