Angular - 对象似乎相互绑定但不是

Question

我有一个编辑页面，用户可以在其中编辑系统中的文件，然后保存它。加载文件时，我从结果中创建了两个对象，一个绑定到视图，另一个我希望保留（保持其原始状态）直到单击“保存”，然后使用它与视图进行比较-绑定对象，查看是否有任何更改。

所以，当页面加载时，它正在运行

$http.get('/api/files/' + $stateParams.id)
  .then(function (result) {
      vm.fileTemp = result.data;
      vm.fileTempCopy = result.data;

fileTempCopy 没有被视图中或控制器其他地方的任何东西触及或引用，除了在保存方法中，我检查它们是否相似。但不知何故，当我对输入字段进行更改时，它们都会更新（好像它们都被用作输入的 ng-model）。

 if(vm.fileTemp === vm.fileTempCopy)//in save-function

总是正确的，它们的字段完全相同。

为什么会发生这种情况，我该如何解决？

Answer 1

使用赋值运算符，您实际上只是在引用原始数组。数组是引用类型。这意味着，它们实际上并不存储值，它们只存储对这些值的引用。您所做的是复制对内存位置的引用，这意味着对该位置的内存的任何更改（包括删除元素）都将反映在两个数组中。

所以你会想要这样做：

  vm.fileTemp = angular.copy(result.data);
  vm.fileTempCopy = angular.copy(result.data);

Answer 2

这是检查对象“值相等”的一种非常基本的方法。

function isEquivalent(a, b) {
    // Create arrays of property names
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    // If number of properties is different,
    // objects are not equivalent
    if (aProps.length != bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;
}

//After your update Outputs: false
console.log(isEquivalent(vm.fileTemp, vm.fileTempCopy));