綁定到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中使用功能的原因是許多功能很耗時，因此您的摘要會變得很慢。 即使您的功能很快，也不能保證它們將來不會長大。