AngularJS，$ watch运行两次，无法使旧的/新的值比较工作

Question

I'm using AngularJS and I want to watch if a variable changes, and the decrease another variable. Here's what I have:

$scope.$watch('watchMe', function () {
    $scope.decreaseMe--;
)

The watchMe variable is available to all scopes. I only have one controller which contains both a function where watchMe is changed as well as the watch.

Watch is running twice each time watchMe is changed and I understand that this is the way Angular works. However, that means that decreaseMe will be wrong, since it will be decreased twice as well.

I've tried comparing old and new values but I can't get it to work.

I'm outputting old/new/decreased values and this is what I get when watchMe is changed once:

old: 7  new: 8 
decreasing  5
old: 7  new: 8 
decreasing  4 

What should I do to decrease decreaseMe only once when watchMe is changed?

---

Update:

Tried to make a Plunkr to show this but in Plunkr $watch only fires once..

Answer 1

Is this not working?

$scope.$watch('watchMe', function( newVal, oldVal ) {
    if( newVal != oldVal ) {
        $scope.decreaseMe--;
    }
});

Answer 2

You should share a lot more code so we can see how you are set up. In any case, I've run into a similar problem before when I referenced the AngularJS lib twice on my page.

Answer 3

I have run into a similar issue when using directive templates with a shared controller. This means that your controller code gets run twice.

(Try outputting to the console in your controller but outside your watch statement to prove this, you should see a duplicate)

.directive('directiveOne', function () {
    return {
        templateUrl: 'app/templates/directive-one.html',
        restrict: 'A',
        controller: 'directiveController'
    };
})
.directive('directiveTwo', function() {
    return {
        templateUrl: 'app/templates/directive-two.html',
        restrict: 'A',
        controller: 'directiveController'
    };
})

The solution was to separate them out into their own controller

EG

.directive('directiveOne', function () {
    return {
        templateUrl: 'app/templates/directive-one.html',
        restrict: 'A',
        controller: 'directiveOneController'
    };
})
.directive('directiveTwo', function() {
    return {
        templateUrl: 'app/templates/directive-two.html',
        restrict: 'A',
        controller: 'directiveTwoController'
    };
})