javascript - 当绑定(bind)到 AngularJS 中的函数时，幕后会发生什么

Question

谁能解释一下当你绑定(bind)到 AngularJS 中的函数时幕后会发生什么？它打造出一款什么样的腕表？我有一种感觉，它会为构成返回值的每个属性创建两个 watch (在下面的示例中)。不过我当然不确定这一点，但这感觉像是我们不应该做的事情。

例如

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

JS

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

Answer 1

如果您创建了 Angular 范围方法“vm.someFunc()”，则会持续轮询该方法。您可以通过在该方法中设置断点来验证这一点，它会不断受到攻击。如果您检查任务管理器并显示浏览器正在运行您的网站，则内存会不断增加并且不会停止。

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

显示或隐藏不是事件，因此这就是它被这样轮询的原因。要修复并提供相同的功能，请将其转换为作用域变量。
更改 html 标签:

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

至

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

在你的 Controller 中:

$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”，而不是拥有多个 watch ，例如:

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

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

或者遵循已接受的答案并尽量减少 watch 的数量:

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