$watch unbind函数在被调用时没有定义。

I am building a user session activity timer using AngularJS 1.6. I am using $scope.$watch to monitor the value of a countdown timer. This works for the most part although $watch is binding to the variable multiple times, every time the session timer function is called. To solve this, I think I need to simply unbind the watcher if it is already defined.

我正在使用AngularJS 1.6构建一个用户会话活动计时器。我用美元范围。$watch监控倒计时计时器的值。这在很大程度上起作用，尽管$watch对变量多次绑定，每次调用会话计时器函数。为了解决这个问题，我想我需要简单地解除监视，如果它已经被定义了。

I saw some very simple examples on how to do this on SO, however nothing seems to be working. The $scope.$watch method returns a function that when called, unbinds the watcher.

我看到了一些非常简单的例子来说明如何做到这一点，但是似乎没有任何效果。美元的范围。$watch方法返回一个函数，当调用该函数时，它会将监视者解除绑定。

However, anytime the unbind function is called, there is an error in the console.log 'ReferenceError: sessionWatchUnbind is not defined'. This seems very strange because the undefined error is happening within an IF statement that checks if the function is defined before calling it. How could it be defined and then undefined immediately after?

但是，当调用unbind函数时，控制台会出现错误。log 'ReferenceError: sessionWatchUnbind没有定义'。这看起来很奇怪，因为在一个IF语句中发生了未定义的错误，该语句检查函数在调用之前是否被定义。它是如何定义的，然后紧接着又没有定义?

// If session countdown watch is already set unbind it to prevent multiple watches on the same value
if (sessionWatchUnbind) {
  console.log('sessionWatchUnbind ', sessionWatchUnbind); // This prints the function definition to the console log properly
  sessionWatchUnbind(); // This line throws an error 'ReferenceError: sessionWatchUnbind is not defined' but it was defined in the previous lines!?
}

// Set a watcher on session countdown value
sessionWatchUnbind = $scope.$watch('session_countdown', function (newValue, oldValue) {
  if (newValue !== oldValue) {

    // continued...
  }
});

Also, the same error happens if I try placing the call inside the body of the watcher as such.

同样，如果我尝试将调用放置在观察者的体内，同样的错误也会发生。

// Set a watcher on session countdown value
sessionWatchUnbind = $scope.$watch('session_countdown', function (newValue, oldValue) {
  if (newValue !== oldValue) {
    sessionWatchUnbind(); // This line throws an error ReferenceError: sessionWatchUnbind is not defined
    // continued...
  }
});

I am pretty sure my code is following the numerous examples on how to do this. Perhaps someone could point me in the right direction!

我很确定我的代码是遵循无数的例子来做这个的。也许有人能指点我正确的方向!

UPDATE: I got this to work by binding sessionWatchUnbind to 'this'. Perhaps because the outer wrapper function is bound to 'this' as well. This solution was based on the accepted answer here: How to prevent/unbind previous $watch in angularjs

更新:我通过绑定sessionWatchUnbind来完成这个任务。可能因为外部包装器函数也与“this”绑定。这个解决方案是基于一个公认的答案:如何防止/解开之前在angularjs中的$watch。

    vm = this;

    vm.startActivity = function () {

    // If session countdown watch is already set unbind it to prevent multiple watches on the same value
    if (vm.sessionWatchUnbind) {
      vm.sessionWatchUnbind();
    }

    // Set a watcher on session countdown value
    vm.sessionWatchUnbind = $scope.$watch('session_countdown', function (newValue, oldValue) {
      console.log('sessionWatchUnbind newValue, oldValue ', newValue, oldValue);
      if (newValue !== oldValue) {
          //continued...
      }
    });

1 个解决方案

#1

This code works well for me:

这段代码对我来说很有效:

const watcher = $scope.$watch('variable', value => {     
    // Remove watcher
    if (value)
       watcher();
});