angularjs - 在 AngularJS 中观察模型变化时如何忽略初始负载？

Question

我有一个网页，用作单个实体的编辑器，该实体作为 $scope.fieldcontainer 属性中的深度图。从 REST API(通过 $resource)收到响应后，我向“fieldcontainer”添加一个监视。我正在使用这个 watch 来检测页面/实体是否“脏”。现在我正在使保存按钮弹起，但实际上我想让保存按钮不可见，直到用户弄脏模型为止。

我得到的是 watch 的单个触发器，我认为这是因为 .fieldcontainer = ... 分配在我创建 watch 后立即发生。我正在考虑只使用“dirtyCount”属性来吸收最初的误报，但这感觉很老套......而且我认为必须有一种“Angular 惯用”方法来处理这个问题 - 我不是唯一的人使用 watch 来检测脏模型。

这是我设置 watch 的代码:

 $scope.fieldcontainer = Message.get({id: $scope.entityId },
            function(message,headers) {
                $scope.$watch('fieldcontainer',
                    function() {
                        console.log("model is dirty.");
                        if ($scope.visibility.saveButton) {
                            $('#saveMessageButtonRow').effect("bounce", { times:5, direction: 'right' }, 300);
                        }
                    }, true);
            });

我只是一直认为必须有一种更干净的方法来做到这一点，而不是用“if (dirtyCount >0)”来保护我的“UI 脏”代码...

Answer 1

第一次调用监听器时，旧值和新值将相同。所以只需这样做:

$scope.$watch('fieldcontainer', function(newValue, oldValue) {
  if (newValue !== oldValue) {
    // do whatever you were going to do
  }
});

这实际上是 Angular 文档 recommend handling it 的方式:

After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization