AngularJS:在模式取消时恢复形式？

Question

我正在尝试在 ngModelController 中使用 AngularJS 1.3.0 的新 $rollbackViewValue() 方法取消对模式弹出窗口中表单的更改或在关闭模式时保留它们。我正在将 BootstrapUI 用于 $modal 服务。

我认为我走在正确的轨道上，但有些东西不太正常:

在我的 Controller 中，我有:

   $scope.updateCharge = function (charge) {
        var scope = $scope.$new();
        scope.charge = charge;

        var modalInstance = $modal.open({
            templateUrl: 'client/app/views/providers/charges/updateCharge.html',
            scope: scope
        });

        modalInstance.result.then(function () {
            scope.charge.$save({providerId: providerId, chargeId: charge.id});
        });
    };

在我的模板中，我有以下内容:

<form name="form" novalidate ng-model-options="{updateOn: 'save',  debounce: {'save': 0 }}" class="form-horizontal" role="form">
    <div class="modal-body">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="chargeName">Name</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" required ng-model="charge.code" id="chargeName"/>
            </div>
        </div>
     </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-disabled="form.$invalid" ng-click="form.$broadcast('save'); $close()">Update</button>
        <button class="btn btn-warning" ng-click="form.$rollbackViewValue(); $dismiss('cancel')">Cancel</button>
    </div>

</form>

一般来说，这似乎有效。当我单击“取消”时，我的更改将被还原。当我单击“更新”时，模式会关闭，但我在 scope.charge 对象中看不到我的更新。

我希望我的 scope.charge 对象会在模式关闭之前更新。

我是否错误地使用了ng-model-options？

如果我添加一个单独的“应用”按钮，该按钮仅执行 form.$broadcast('save')，我会看到我的范围对象已正确更新。因此，我假设我的 $close() 在 ng-model-options 处理事件之前被调用。我怎样才能避免这种竞争条件？

Answer 1

您可以使用 $rollbackViewValue() 方法来恢复更改，但我认为这不是本意。

$rollbackViewValue(); Cancel an update and reset the input element's value to prevent an update to the $modelValue, which may be caused by a pending debounced event or because the input is waiting for a some future event.

If you have an input that uses ng-model-options to set up debounced events or events such as blur you can have a situation where there is a period when the $viewValue is out of synch with the ngModel's $modelValue.

In this case, you can run into difficulties if you try to update the ngModel's $modelValue programmatically before these debounced/future events have resolved/occurred, because Angular's dirty checking mechanism is not able to tell whether the model has actually changed or not.

The $rollbackViewValue() method should be called before programmatically changing the model of an input which may have such events pending. This is important in order to make sure that the input field will be updated with the new model value and any pending operations are cancelled.

正常用例是复制模型，可以选择保留模型，如果一切正常，则刷新模型。

_this = this;
this.edit = function() {
    this.modelToEdit = angular.copy(this.originalModel);
}

this.save = function () {
    service.save(modelToEdit).then(function(savedModel) {
        _this.originalModel = savedModel;
    });
}

或者您可以备份模型并在取消时恢复

_this = this;
this.edit = function() {
    this.backupModel = angular.copy(originalModel);
}

this.cancel = function() {
    this.originalModel = this.backupModel;
}
this.save = function() {
    service.save(this.originalModel).then(function(data) {}, function(error) {
       _this.originalModel = _this.backupModel;})

}