删除 $watch 并将逻辑从 AngularJS 中的 $watch 中取出

Question

我在 AngularJS 中有一个代码，如下所示：

$scope.startWatching = function () {
    return $scope.$watch('form', function (n, o) {
        var timeoutPromise;

        $timeout.cancel(timeoutPromise);  //does nothing, if timeout alrdy done
        timeoutPromise = $timeout(function () {
            if (n !== o) {
                if ($scope.isLegacy) {
                    $scope.showCompleteBtn = $scope.showCompleteButton2();
                } else {
                    $scope.showCompleteBtn = $scope.showCompleteButton();
                }
            }
        }, 400);



    }, true);

因此，每当表单更改时，要么调用 $scope.showCompleteButton2() 要么调用 $scope.showCompleteButton()。

问题是 $watch() 被调用了很多次，所以我需要将这两个方法从 $watch() 中取出。

Answer 1

像事件侦听器这样的观察器只应在构建 DOM 时添加一次。并在 DOM 被拆除时移除。

如果代码需要启用或禁用观察者执行的操作，请在模型中提供一个状态来执行此操作：

var enableWatch = false;

$scope.startWatching = function () {
    enableWatch = true;
};

var timeoutPromise;

$scope.$watch('form', function (n, o) {
    if (!enableWatch) return;

    //ELSE
    timeoutPromise && $timeout.cancel(timeoutPromise);
    timeoutPromise = $timeout(function () {
        if (n !== o) {
            if ($scope.isLegacy) {
                $scope.showCompleteBtn = $scope.showCompleteButton2();
            } else {
                $scope.showCompleteBtn = $scope.showCompleteButton();
            }
        }
    }, 400);

}, true);

观察者在 enableWatch 变量为 false 时忽略更改。将变量设置为 true 以启用指定的操作。

删除 $watch 并将逻辑从 AngularJS 中的 $watch 中取出

Remove $watch and bring the logic out of the $watch in AngularJS

angularjs

angularjs-watch