AngularJS，$watch 运行两次，无法进行旧/新值比较答案

【问题标题】：AngularJS, $watch running twice, can't get old/new value comparison to workAngularJS，$watch 运行两次，无法进行旧/新值比较
【发布时间】：2014-02-18 12:50:21
【问题描述】：

我正在使用 AngularJS，我想观察一个变量是否发生变化，并减少另一个变量。这是我所拥有的：

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

watchMe 变量适用于所有范围。我只有一个控制器，其中包含更改 watchMe 的功能以及手表。

每次更改 watchMe 时，Watch 都会运行两次，我知道这就是 Angular 的工作方式。但是，这意味着 reductionMe 是错误的，因为它也会减少两倍。

我尝试比较旧值和新值，但无法正常工作。

我正在输出旧/新/减少的值，这就是我在 watchMe 更改一次时得到的结果：

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

watchMe 更改时，我应该怎么做才能只减少一次 reduceMe？

更新：

试图制作一个 Plunkr 来显示这一点，但在 Plunkr 中 $watch 只触发一次..

【问题讨论】：

你能告诉我们，你是如何比较新旧价值的吗？
小提琴或笨蛋在这里会很有帮助。
watchMe 如何与所有范围共享？除非它的 rootscope 我不明白。
我会尽快添加 fiddle/plunkr。至于共享数据部分，我按照这个例子：github.com/mhevery/angular-node-socketio/tree/master/public
@Michael 我按照下面 acrmuui 提供的答案中的建议进行了比较。但我没有让它工作（见我对那个答案的评论）

标签： javascript angularjs angularjs-scope watch

【解决方案1】：

这不工作吗？

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

【讨论】：

这就是我想要在上面的输出中展示的内容。在执行的两次迭代中，newVal 为 8，oldVal 在两次迭代中均为 7。这意味着 newVal != oldVal 两次都为真，而 reductionMe 将减少两次。
不会newVal != oldVal 总是评估为true？

【解决方案2】：

您应该分享更多代码，以便我们了解您的设置。无论如何，我之前在我的页面上两次引用 AngularJS 库时遇到了类似的问题。

【讨论】：

我会尽快分享 fiddle/plunkr

【解决方案3】：

在将指令模板与共享控制器一起使用时，我遇到了类似的问题。这意味着您的控制器代码会运行两次。

（尝试在您的控制器中输出到控制台但在您的监视语句之外以证明这一点，您应该会看到一个重复）

.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'
    };
})

解决方案是将它们分离到自己的控制器中

例如

.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'
    };
})

【讨论】：