Question

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

e.g。

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

JS

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

Answer 1

如果您创建了角度范围方法“vm.someFunc（）”，则会不断对其进行轮询。您可以通过在此方法中设置断点来验证这一点，它将不断受到影响。如果您检查任务管理器并显示运行您网站的浏览器，则内存会持续上升并且不会停止。

在我看来，范围函数只应在使用事件触发器时使用：click事件，change事件，keypressed是一些例子。

显示或隐藏不是事件，因此这就是它被调查的原因。要修复并提供相同的功能，请将其转换为范围变量。
从以下位置更改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中的函数时幕后发生了什么

2 个答案: