绑定到 AngularJS 中的函数时幕后发生了什么

Question

谁能解释一下当您绑定到 AngularJS 中的函数时幕后发生了什么？它创造了什么样的手表？我有一种感觉，它会创建两个手表（在我下面的示例中），每个手表属性构成 return 值。但是我对此当然不确定，但感觉像是我们不应该做的事情。

例如

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

JS

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

Answer 1

如果您创建了 angular 作用域方法 "vm.someFunc()"，这将不断被轮询。您可以通过在此方法中设置断点来验证这一点，它会不断地被击中。如果您检查任务管理器并向浏览器显示运行您的网站，内存会不断增加并且不会停止。

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

显示或隐藏不是事件，所以这就是为什么它像 that.To 一样被轮询修复并提供相同的功能，将其变成一个范围变量。
更改 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;
     }
}

Answer 2

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

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

之所以总是不推荐在ng-show中使用函数，是因为很多函数很耗时，所以你的消化变得很慢。而且即使你的函数很快，也不能保证它们将来不会长大。

绑定到 AngularJS 中的函数时幕后发生了什么

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

javascript

angularjs

angularjs-watch