重置 Angular 1.5 视图模型

Question

我有一个很大的 from，我试图在按钮中重置它，但它没有按预期工作。

查看下面我的代码

function someCtrl() {
    var temp;
    var vm = this;
    someService.then(function (res) {
        vm.data = res;
        temp = res;
    });

    vm.reset = function () {
        vm.data = temp; //so that vm will reset to res;
    }
}

这里我在 ng-model 中使用 vm.data 来编辑每个字段。但是当 ng-model edit vm.data 时，temp 也会自行更新。我猜正在发生一些可变范围参考。因此，当调用 vm.reset 时 vm.data 和温度相同，因此不会发生重置。

请提出删除此变量作用域引用的方法。

Answer 1

使用angular.copy而不是赋值，=表示引用而angular.copy() 创建一个新对象作为深拷贝。

angular.copy(res, temp );

您的代码将是，

 someService.then(function (res) {
        vm.data = res;
        angular.copy(res, temp );
 });

Answer 2

在javascript中，对象通过引用传递。因此，在您的服务回调中，您将相同的响应对象分配给 vm.data 和 temp。这样，在更改 vm.data 的同时，您也在更改温度，因为两者都指向相同的内存位置。

要使其工作，请将单独的实例（深度克隆 res 对象）分配给 vm.data 和 temp。像这样：

someService.then(function (res) {
    vm.data = angular.copy(res);
    temp = res; // no need to deep clone this one. temp can point to the res obj
});

并将复位函数改成这个

vm.reset = function () {
    vm.data = angular.copy(temp); // assign "backup" value to vm.data
}

重置 Angular 1.5 视图模型

Reset Angular 1.5 view model

javascript

angularjs

angularjs-1.5

angular-components