Question

我必须在很多地方展示一个计数。

.container(ng-controller="counting")
  small {{count()}} 
    ng-pluralize(count='count()', when='{0: "Nothing", 1: "voter", 2: "multiple"}')
  small {{count()}} 
    ng-pluralize(count='count()', when='{0: "Nothing", 1: "voter", 2: "multiple"}')
  small {{count()}} 
    ng-pluralize(count='count()', when='{0: "Nothing", 1: "voter", 2: "multiple"}')

在这个例子中，重复了6个计数。 count函数运行6次，并且过滤和其他操作非常繁重。有没有一种方法可以只运行一次计数，但是当“计数”范围发生变化时仍然会更新计数？我知道我可以手动观察代码，但也许有更简单的角度方法吗？

Answer 1

您可以使用memoize function of Lodash.

怎么做？

0）下载lodash并在index.html

中加载脚本

1）在您的控制器中，向$window添加依赖项并从

修改count（）函数的定义

$scope.count = function() {
// Do awesome things 
}

到

$scope.count = $window._.memoize(function() {
// Do awesome things 
});

如果count方法可以多次返回不同的值，则必须清除缓存

3）在需要时使用$scope.count.cache = {}清除值，或者您可以提供自己的解析器功能来创建缓存键，从而不会丢失结果。例如，如果您的计数函数使用$scope.someVar来计算其结果，那么您可以使用以下解析器：

function() {
return $scope.someVar;
}

并将$scope.count声明为：

$scope.count = $window._.memoize(function() {
// Do awesome things 
},
function() {
return $scope.someVar;
}
);

它是如何运作的？

在每次调用memoized函数时，如果结果存储与否，解析器将查看缓存（默认情况下，解析器返回转换为附加了一些乱码的字符串的第一个参数）。如果找到结果，则返回结果。否则，计算函数并将返回值存储在缓存中。

良好做法

创建工厂以返回_：

angular.module('myLittleApp')
.factory('LodashFactory', ['$window', function($window) {
    return $window._;
  }]);

Answer 2

有多种方法可以实现这一目标：

1）通过在模板内缓存：
你可以对表达式中的变量进行赋值

{{countCache = count()}},

然后在模板中引用它：

{{countCache}}

plunker

修改：
2）在Count函数内部缓存（变量Memoization）：
另一种更通用的方法是向count函数添加缓存：

function count(){ var result = 0; if(!count.cache || //parameters have been changed){ // calculate result count.cache = result; } return count.cache; }

3）使用$scope.$watch：

$scope.$watch(function(){ if(//parameters have changed){ return true; }else { return false } },function(){ //calculate new count $scope.count = result; }); $scope.count = 0;

并从模板内部引用count变量。

angularjs只优化计数一次

2 个答案: