javascript - 保存前阻止模型更新

Question

我去列表视图页面点击任何元素的编辑。更改文本框上的内容，然后单击取消。这将导航到列表视图，但即使没有我保存，条目现在也会更新。

路线

(function () {
    'use strict';

    angular.module('myApp.Group', ['ngRoute'])
        .config(['$routeProvider', function ($routeProvider, $rxStatusTagsProvider) {
            $routeProvider.when('/group/list', {
                templateUrl: 'group/templates/list_view.html',
                controller: "GroupListCtrl"
            });
            $routeProvider.when('/group/edit/:id', {
                templateUrl: 'group/templates/edit.html',
                controller: "GroupEditCtrl"
            });
        }]);

    //http://localhost:5000/groups/list
}());

Ctrl

(function () {
    "use strict";
    angular.module('myApp.Group')
        .controller("GroupListCtrl", function ($scope, GroupService) {
            $scope.groups = GroupService.list();
        })
        .controller("GroupEditCtrl", function ($scope, $routeParams, $location, GroupService) {
            var id = $routeParams.id;

            $scope.id = id;
            $scope.entry = GroupService.get(id);

            $scope.save = function (entry) {
                GroupService.save(entry);
                $location.path('/group/list');
            };

        })

}());

服务

(function () {
    "use strict";
    angular.module('myApp.Group')
        .service('GroupService', function ($http, $location, $rootScope) {

            var uid = 1,
                listData = [
                    {"id": 1, "name": "System Admins",  "description": "Lorem ipsuem"},
                    {"id": 2, "name": "OS Admin",     "description": "Lorem ipsuem"}
                ];

            this.get = function (id) {
                return listData[id - 1];
            };
        });
}());

编辑 tmpl

<form method="post" ng-submit="groupForm.$valid && save(group)" name="groupForm" novalidate>
    <rx-form-fieldset>
        <rx-form-item label="Name">
            <input type="text" ng-model="entry.name" name="groupName" required autofocus ng-minlength="3" ng-maxlength="30"/>
            <div ng-show="groupForm.groupName.$dirty && groupForm.groupName.$invalid">
                <span class="error" ng-show="groupForm.groupName.$error.required">Required!</span>
                <span class="error" ng-show="groupForm.groupName.$error.minlength">Too short!</span>
                <span class="error" ng-show="groupForm.groupName.$error.maxlength">Too long!</span>
            </div>
        </rx-form-item>
        <rx-form-item label="Description">
            <textarea rows="10" cols="30" ng-model="entry.description" name="groupDescription" required ></textarea>
            <div ng-show="groupForm.groupDescription.$dirty && groupForm.groupDescription.$invalid">
                <span class="error" ng-show="groupForm.groupDescription.$error.required">Required!</span>
            </div>
        </rx-form-item>
        <rx-button toggle-msg="Loading..." default-msg="Save" type="submit" ></rx-button>
        <rx-button ng-controller="redirectCtrl" default-msg="Cancel" ng-click="back('group/list')"></rx-button>
    </rx-form-fieldset>
</form>

Answer 1

我认为您需要创建模型的副本，以防在调用取消时需要恢复原始状态。要制作模型的副本，您可以在范围内的单独 JS 对象中复制模型，如下所示：

$scope.master= angular.copy($scope.entry);

单击取消后，您可以将主对象恢复到模型中以放弃更改：

angular.copy($scope.master, $scope.entry);

如果您想在这里查看 API 参考，它适合您https://docs.angularjs.org/api/ng/function/angular.copy

Answer 2

首先，当您单击元素以打开模型时，您需要保存旧数据，当单击取消时，您需要将旧数据分配回您的entry对象

Answer 3

您可以使用$rollbackViewValue(). ngModelController 的 Angular 文档