AngularJS $watch 无法正常工作

Question

最近我在学习Angularjs，我的代码似乎没有按预期工作: 这是我的div :

<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="data.name" value=""/>
{{data.count}}
</div>
</div>

我的 controller是:

<script>
var app = angular.module('myApp',[]);
app.controller('myController', function($scope) {

    $scope.data = {
        name:"tom",
        count = 0
    }

    $scope.$watch('data', function(oldValue,newValue) {
        ++$scope.data.count;
    },true);

})
</script>

我期望的是当我在 <input> 中键入内容时盒子，{{data.count}}每次都会增加1。但是代码最初是 11，每次我在输入字段中进行更改时，计数都会增加 11，有人可以帮我找出我哪里做错了吗？非常感谢。

Answer 1

为什么会这样？

Watcher 调用多次，因为您为完整对象 data 创建了 watcher。标记 true 将为对象中的每个值创建 sub-watcher。

这是一种正确的行为。我相信你想要这样的东西:

$scope.$watch('data', function(oldValue,newValue) {
         if(oldValue.name != newValue.name){
             ++$scope.data.count;
          }

    },true);

Demo Fiddle

---

第二种解决方案是仅在 name 上观看:

$scope.$watch(function(){
  return $scope.data.name
  }, function(oldValue,newValue) {
      ++$scope.data.count;
});