Angular：范围变量与函数答案

【问题标题】：Angular: scope variable vs functionAngular：范围变量与函数
【发布时间】：2014-06-08 14:32:24
【问题描述】：

在 Angular 中什么更好 - 绑定到变量或函数。特别是：

是否会因摘要调用或为函数创建的额外监视而导致性能损失？
对于应该和不应该做什么范围函数有什么建议吗？

两个选项的示例：

<!-- With function -->
<button ng-disabled="noDataFoo()">Add</button>

<!-- With variable -->
<button ng-disabled="noDataFlag">Add</button>

后备控制器：

app.controller('sample', function($scope, $http) {
    $scope.noDataFlag = true;

    $scope.noDataFoo = function () {
        return !$scope.data;
    };

    $http('/api/getdata').success(function(data) {
        $scope.data = data;
        $scope.noDataFlag = false;
    };
});

【问题讨论】：

标签： angularjs data-binding

【解决方案1】：

我不是 javascript 性能专家或其他任何东西，但我天真的观点认为该变量可能会在几纳秒内执行该函数，因为这是一个 2 步过程。

此外，上面的示例也可以通过以下方式轻松完成：

<button ng-disabled="!data">Add</button>

【讨论】：

非常感谢您的回答。我看到我还没有完全解释我的意图。我担心的是——Angular 多久计算一次函数。可能存在不绑定到函数的 Angular 建议。有问题的示例已简化，应用程序功能更长，并且取决于多个 API 的返回值。这使得状态变量难以管理......

【解决方案2】：

我做了一些测试，统计了在不同情况下该函数被调用了多少次。它发生时，函数被调用的次数是它绑定的次数，有时是次数的两倍，而且它似乎发生在每次外部活动之后，例如页面重新加载或按钮单击或AJAX 调用。

简单来说，如果你有<button ng-disabled="noDataFoo()">然后{{noDataFoo()}}在HTML中，该函数将在页面加载时被调用4次，然后如果某些$http服务带来数据，则再调用2或4次，另外2如果单击了其他按钮，则为 4 次。根据实验，如果noDataFoo 没有变化，则数字为 2，如果确实发生变化，则数字为 4。顺便说一句，点击另一个控制器也是如此。

我的结论是：绑定快速函数是可以的。对于较长的绑定，最好保持较小的绑定数量。对于更长的缓存，更明智的做法是缓存结果并“手动”处理缓存更新。

【讨论】：

这是旧的，但我指出范围变量应该是您所说的某些原因的首选。