调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕？

我读了关于使用范围的一些 AngularJS 陷阱的文章 http://thenittygritty.co/angularjs-pitfalls-using-scopes，并且它指出您不应在表达式中使用函数，并且我知道每次框架认为需要时都可能会计算表达式（并且这种情况可能会发生很多），并且调用昂贵的函数是低效的超过。但是，如果该函数仅根据已加载到作用域中的值进行一些计算怎么办？例如，假设我有一个具有 3 个不同属性的范围，并且某些状态是由这些属性值的组合确定的。我可以在函数中计算该状态：

$scope.state = function() {
    return prop1 && prop2 && prop3;
};

并从表达式调用该函数。另一种方法是每次更改每个属性时调用该函数，以便缓存状态值：

$scope.prop1 = someValue;
$scope.state = getState();
...
$scope.prop2 = someOtherValue;
$scope.state = getState();
...
$scope.prop3 = yetAnotherValue;
$scope.state = getState();

在这种情况下直接从表达式调用函数真的那么糟糕吗？如果是这样，是缓存计算值的唯一替代方法，可能在许多不同的地方，还是我缺少其他方法？

不，没那么糟糕。

在表达式中不使用函数会导致 HTML 因内联 JavaScript 而变得臃肿。

考虑elegance这段代码：

<span ng-show="(form.firstName.$dirty || submitted) && form.firstName.$error.required">First name is required!</span>
...
<span ng-show="(form.lastName.$dirty || submitted) && form.lastName.$error.required">Last name is required!</span>
...
<span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">Email is required!</span>

与此相比：

<span ng-show="isInvalid('firstName')">First name is required!</span>
...
<span ng-show="isInvalid('lastName')">Last name is required!</span>
...
<span ng-show="isInvalid('email')">Email is required!</span>

function Ctrl($scope){
  $scope.isInvalid = function(field){
    return ($scope.form[field].$dirty || $scope.submitted) && $scope.form[field].$error.required;
  };

  $scope.submit = function(){
    $scope.submitted = true;
    // $http.post ...
  }
}

甚至 Angular 作者鼓励 https://stackoverflow.com/a/7794843/1095616在表达式中使用函数。

表达式中的函数在 Angular 中很受欢迎，但需要考虑以下因素：

1. 函数应该是“轻量级的”（用计算术语来说）。
2. 给定相同的输入，函数应该返回相同的输出。
3. 函数应该是独立的（它们不应该影响其他作用域成员），因为否则它们可能会创建 $digest 循环。
4. 函数应该是可缓存的（如果可能的话）。