【问题标题】:Reset Angular 1.5 view model重置 Angular 1.5 视图模型
【发布时间】:2017-05-14 14:55:21
【问题描述】:

我有一个很大的 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 编辑 vm.data 时,temp 也会自行更新。我猜正在发生一些可变范围参考。因此,当调用 vm.reset 时,vm.data 和 temp 相同,因此不会发生重置。

请建议一种方法来删除此可变范围引用。

【问题讨论】:

    标签: javascript angularjs angular-components angularjs-1.5


    【解决方案1】:

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

    要使其工作,请将单独的实例(深度克隆 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
    });
    

    把reset函数改成这个

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

    【讨论】:

    • 和我的回答有什么区别
    • 没什么不同,只是我们同时写的
    【解决方案2】:

    使用 angular.copy 而不是分配,= 表示引用,而 angular.copy() 创建一个新对象作为深拷贝.

    angular.copy(res, temp );
    

    您的代码将是,

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

    【讨论】:

    • 如果不在 vm.reset 函数内部进行深度克隆,第一次执行后,vm.data 和 temp 将再次成为同一个对象。所以这只会工作一次
    • 是的,Sasha89 是对的。第一次分配后,当 vm.reset 中没有深度克隆时它停止工作。
    • 和 angular.copy(res, temp) 对我不起作用.. temp = angular.copy(res);工作
    猜你喜欢
    • 2016-12-27
    • 2013-08-11
    • 2013-08-14
    • 2016-05-31
    • 1970-01-01
    • 2016-10-15
    • 1970-01-01
    • 2014-10-11
    • 1970-01-01
    相关资源
    最近更新 更多