[SOLVED] $watch fires on focus lost

$watch fires on focus lost

I have a textarea tag with jquery.nicescroll pluggin and ng-model attached to it.

<textarea id="paper" ng-model="paper"></textarea>

In my code I apply a $watch on this ng-model variable.

$scope.$watch("paper", onTextChange);

Everything is good except that onTextChange is fired not only when I type something, but when I click away from textareaб and also when I switch to another tab.

How can I prevent it so that onTextChange is fired only when the text is changed, meaning when I type in something or delete chars?

Demo with instructions: plunker

Solution

here's a fix:

http://plnkr.co/edit/kycmUrthYU38Ukdz0jJG?p=preview

setTimeout( 
function() {
    $scope.$watch("paper", function(newtext, oldtext) {
      if (newtext !== oldtext) {
        onTextChange();
      }
    });
  }, 100)

So the issue is that watch fires the function whenever angularjs tells the app to digest. What you did was tell it to call the 'change' function EVERY time, when you should have passed in a checker function to check the change happened. It's about 'watching', not about 'watching for changes' - the function argument is supposed to see if you need to do something.

Extra note:

AngularJS sets up watchers for all kinds of things on various elements - here's a bit more info. I believe the blur corresponds to ng-touched which triggers the digest What gets added to $scope.$$watchers by default in Angular? And what triggers $digests?