Question

在相当大的页面上，用户可以通过各种方式编辑数据： - 改变一些＆＃34; classic＆＃34;输入字段 - 单击按钮添加文件 - 通过拖放更改项目的顺序

在HTML中，简化示例可能如下所示：

<form>
    Name: <input ng-model="person.name">
    Title: <input ng-model="person.title">
    Image: <our-custom-image-uploade-directive ng-model="person.image"/>
    Skills: <our-custom-skill-drag-and-drop-directive ng-model="person.skills"/>
    <button ng-click="save()">Save</button>
</form>

你看，有些编辑＆＃34;设施＆＃34;是基于形式的，有些则不是。

现在，有一个相当简单的任务要做：禁用＆＃34;保存＆＃34;按钮，如果用户没有改变任何东西，或者最终得到的结果与用户与数据交互之前的状态完全相同。

现在我想知道哪种方法可以实现这一目标。

一种方法可能是深入观察整个人物。像那样：

$scope.backupCopyOfPerson = angular.copy($scope.person); // Creae a backup copy of the state before the user changed something

$scope.$watch('person', function (newValue) {
            if(newValue && $scope.backupCopyOfPerson) {
                if(angular.equals(newValue, $scope.backupCopyOfPerson)) {
                    $scope.unsavedChanges = false;

                }
                else {
                    $scope.unsavedChanges = true;
                }
            }
        }, true);

然而，深入观察具有大量子对象等的大对象可能会导致一些严重的性能问题。

另一个想法是，使用ng-pristine表示香草表单字段，并在所有其他指令中使用$setDirty() / $setPristine()。这可能会更快，但它绝对不是一个优雅的解决方案。

您怎么看？

Angular版本是1.58

Answer 1

我对此的看法：

如果您对观看表现有疑问：您应该对常规输入组合角度形式检查，并在其他属性上添加观察器。

这将为您节省时间和时间。表演，因为你将观看尚未

的变量

$scope.$watch('person.image', function (newValue) {
      $scope.unsavedChanges.image = ($scope.person.image == $scope.backupCopyOfPerson.image)
}}, true);

然后在保存时检查您的unsavedChanges是否至少为1

使用基于表单和非基于表单的属性监视对象的更改

1 个答案: