javascript - 值在保存之前发生变化 - Angular JS

Question

我用 Angular JS 创建了一个应用程序，其中我从工厂获取一个 json，并在两个 Controller Ctrl1 和 Ctrl2 中获取它。代码工作正常，但在结构中我有取消和保存按钮，当我取消时，我需要重做以前保存的更改，当我单击保存时，它应该更新 json。

但是由于 Angular 是双向绑定(bind)，因此即使在单击“保存”按钮之前，该值也会发生变化

我的代码如下所示

html

<div ng-app="app">
    <div ng-controller="Ctrl1">
        <form>
            <br></br>{{user}}</form>
    </div>
    <div ng-controller="Ctrl2">
        <input type="text" ng-model="user.name" /><br>
        <input type="button" ng-click="save()" value="Save" />
        <input type="button" ng-click="cancel()" value="Cancel" />
    </div>
</div>

脚本

var app = angular.module("app", []);
app.factory('InitApp', function () {
    return {
        name: 'Manu',
        age: 15
    };
});
app.controller('Ctrl1', function ($scope, InitApp) {
    $scope.user = InitApp;
});

app.controller('Ctrl2', function ($scope, InitApp) {
    $scope.user = InitApp;
    $scope.save = function () {

    }
    $scope.cancel = function () {}
});

Answer 1

我猜测在保存之前更改值是不需要的。您想要做的是将对象复制到 Controller 中并操作/保存副本。

app.controller('Ctrl1', function ($scope, InitApp) {
    $scope.user = angular.copy(InitApp);
});

这会断开 Controller 对象与服务对象的连接，从而为您留下服务中的一个真实来源。取消只能重新绑定(bind)到服务对象。

此外，在您的 fiddle 中，您将返回属性并操作 Controller 中的服务。您需要返回一个对象，这样您就不会直接操作服务并破坏它。

http://jsfiddle.net/bfelda/8btk5/45/