当绑定到AngularJS中的函数时，会在后台发生什么

What happens behind the scenes when binding to a function in AngularJS

本文关键字：后台 什么 绑定 AngularJS 函数      更新时间：2023-09-26

有人能解释当您绑定到AngularJS中的函数时，在幕后会发生什么吗？它创造了什么样的手表？我有一种感觉，它会创建两块手表（在我下面的例子中），每一块手表对应一个构成回报值的财产。然而，我当然不确定这一点，但感觉这是我们不应该做的事情

例如

<div ng-show="vm.someFunc()">

JS-

vm.someFunc = function() {  
    return vm.property1 || vm.property2;
}

如果您创建了angular scope方法"vm.someFunc（）"，它将不断被轮询。您可以通过在该方法中设置断点来验证这一点，它将不断被命中。如果你查看任务管理器并显示浏览器正在运行你的网站，内存就会不断增加，而且不会停止。

在我看来，作用域函数应该只在使用事件触发器时使用：点击事件、更改事件、按键就是其中的一些例子。

显示或隐藏不是事件，所以这就是为什么它会被这样的调查。要修复并提供相同的功能，请将其转换为范围变量
将html标签从：更改

<div ng-show="vm.someFunc()">

至

<div ng-show="vm.someFunc">

在你的控制器中：

$scope.KeyPressed = false;
$scope.Tags = '';

然后创建一个你想观看的观看事件：

//initialize showtag when page loads
$scope.vm.someFunc = $scope.KeyPressed && $scope.Tags !== '';
//watch for any new changes on keypressed
$scope.$watch('KeyPressed', function (newValue, oldValue) {
     if (newValue && $scope.Tags !== '') {
         $scope.vm.someFunc= true;
     } else {
         $scope.vm.someFunc= false;
     }
}
//watch for any new changes on keypressed
$scope.$watch('Tags', function (newValue, oldValue) {
     if (newValue !== "" && $scope.KeyPressed) {
         $scope.vm.someFunc= true;
     } else {
         $scope.vm.someFunc= false;
     }
}

或者，您可以更改为"watchCollection"，而不是拥有多个手表，如：

$watchCollection('[KeyPressed, Tags]', function (newValue) { }

newValue[0]是KeyPressed的值，newValue[1]是Tags 的值

或者按照公认的答案，尽量减少手表数量：

$scope.TruthyVal= function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};
$scope.$watch('TruthyVal', function (newValue, oldValue) {
     if (newValue) {
         $scope.vm.someFunc= true;
     } else {
         $scope.vm.someFunc= false;
     }
}

事实上，angular并不在乎你在html中写什么——函数、变量或其他什么。它将表达式作为字符串，解析它，并在每个摘要周期计算它的值。所以，{{1 + 2}}、{{sum(1, 2)}}和{{1 | sum:2}}实际上以或多或少相同的速度做着相同的工作。

这三种方式都是合法的，不会造成内存泄漏

为什么总是不建议在ng show中使用函数，是因为很多函数都很耗时，所以你的消化会变得很慢。即使你的功能很快，你也不能保证它们将来不会长大。

相关文章：