Disable and enable watches in AngularJS

Question

I have a watch on a data object:

$scope.$watch('data', function(after, before) {
    $scope.saveData();
}, true);

I also have a modal that pops up to edit some of the data object's properties above. However, if I edit any properties through this modal, but decide to 'cancel', it still saves the edited property.

Is there a way to disable that watch when the modal pops up?

Answer 1

$watch returns a function. if you call it you remove your watcher

angular docs, scroll down to $watch and take a look at the return value

var myWatcher = $scope.$watch('data', function(after, before) {
   $scope.saveData();
}, true);

myWatcher(); // removes your watcher

EDIT: with angular-ui-bootstrap you could pass the deregistration function to the modal controller. modified example from the docs:

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      resolve: {
        items: function () {
          return {
            data: data
            myWatcher: myWatcher // you can call items.myWatcher() in your modal controller
          };
        }
      }
    });

but i am not aware of a simple method (function call or similar) to re-enable the watcher. you will have to set it again.

    modalInstance.result.then(function (data) {
      $scope.data = data;
        }, function () {
          // callback for cancel, here you could re-apply the watcher
    });