绑定到AngularJS中的函数在幕后会发生什么

Question

当您绑定到AngularJS中的函数时，谁能解释幕后发生的事情？ 它创造出什么样的手表？ 我感觉它将为组成返回值的每个属性创建两个手表（在下面的示例中）。 但是我对此不确定，但是感觉我们不应该这样做。

例如

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

JS

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

Answer 1

如果创建了角度范围方法“ 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]是Tag的值

或者遵循公认的答案并尽量减少手表数量：

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

Answer 2

实际上，angular并不关心您在html中编写的内容-函数，变量或其他内容。 它以表达式为字符串，对其进行解析并在每个摘要循环中计算其值。 因此， {{1 + 2}}和{{sum(1, 2)}}和{{1 | sum:2}} {{1 | sum:2}}实际上以差不多相同的速度完成相同的工作。

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

始终不建议在ng-show中使用功能的原因是许多功能很耗时，因此您的摘要会变得很慢。 即使您的功能很快，也不能保证它们将来不会长大。