Javascript 如何在Angular中实现可取消的可编辑字段？

在我的模型中，我有一个需要绑定多个控件的字段。其中一个控件是文本框。文本框不应该直接编辑字段，而是应该允许用户键入，然后提交更改或取消。如果发生任何其他操作，则应覆盖文本字段中的任何更改。一个约束是，还有其他UI组件会更改该值，并且无法访问本地范围

我用指令实现了所需的行为：

它按预期工作，但我觉得必须有更好的方法来做到这一点。有什么想法吗

{{foo}}
增量
减量


更新
取消

var-app=angular.module（'app'，[]）；
var controller=app.controller（'controller'，function（$scope）{
$scope.foo=1；
$scope.increment=function（）{++$scope.foo；}；
$scope.decrement=函数（）{--$scope.foo；}；
});
var directive=app.directive（'shadow'，function（）{
返回{
范围：正确，
链接：功能（范围、el、att）{
作用域$parent.$watch（附件阴影，函数（新值）{
范围[att.shadow]=新值；
});
scope.commit=函数（）{
scope.$parent[att.shadow]=角度复制（scope[att.shadow]）；
};
scope.cancel=函数（）{
scope[att.shadow]=角度复制（scope.$parent[att.shadow]）；
};
}
};
});

你觉得这有点复杂：）

视图：

一种更为奇特的方法是跟踪临时值的更改，并且仅在原始值和临时值之间存在差异时才启用提交/取消按钮

视图：

---

好主意。我应该提到，其他UI组件也可以更改该值。他们没有访问取消或其他本地作用域函数的权限。好的，如果控制器之外的组件可以更改值，您可能需要将get/set逻辑放入工厂。如果数据对象存储在工厂中，“get”方法返回完整的数据对象，“set”更改data.original-您应该是golden。可能需要在控制器中添加另一个侦听器，以便跟踪从外部对原始文件所做的更改，如果发生这种情况，请调用$scope.reset（）。

<div ng-controller="ShadowController">
    <h1>{{foo}}</h1>

    <div>
        <button ng-click="increment()">increment</button>
        <button ng-click="decrement()">decrement</button>
    </div>

    <div>
        <input type="text" ng-model="tempFoo" />
        <button ng-click="commit()">update</button>
        <button ng-click="cancel()">cancel</button>
    </div>
</div>

.controller('ShadowController', function ($scope) {
    $scope.foo = 1;

    $scope.increment = function () {
        ++$scope.foo;
        $scope.cancel();
    };

    $scope.decrement = function () {
        --$scope.foo;
        $scope.cancel();
    };

    $scope.commit = function () {
        $scope.foo = parseFloat($scope.tempFoo);
    };

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

    $scope.cancel();
});

<div ng-controller="ShadowControllerAdv">
    <h1>{{data.original}}</h1>

    <div>
        <button ng-click="increment()">increment</button>
        <button ng-click="decrement()">decrement</button>
    </div>

    <div>
        <input type="text" ng-model="data.edit" />
        <button ng-click="commit()" ng-disabled="!state.hasChanged">update</button>
        <button ng-click="reset()" ng-disabled="!state.hasChanged">cancel</button>
    </div>
</div>

.controller('ShadowControllerAdv', function ($scope) {
    var _dataWatcher;

    $scope.data = {
        original: 1
    };

    $scope.state = {
        hasChanged: false
    };

    function _startWatcher() {
        _dataWatcher = $scope.$watch('data.edit', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                $scope.state.hasChanged = true;
            } else {
                $scope.state.hasChanged = false;
            }
        }, true);
    }

    function _stopWatcher() {
        if (!_dataWatcher) {
            return;
        }
        _dataWatcher();
    }

    $scope.reset = function () {
        _stopWatcher();
        $scope.data.edit = $scope.data.original;
        $scope.state.hasChanged = false;
        _startWatcher();
    }

    $scope.commit = function () {
        _stopWatcher();
        $scope.data.original = parseFloat($scope.data.edit);
        $scope.reset();
    }

    $scope.increment = function () {
        $scope.data.original = $scope.data.original + 1;
        $scope.reset();
    };

    $scope.decrement = function () {
        $scope.data.original = $scope.data.original - 1;
        $scope.reset();
    };

    $scope.reset();
});