如何在 md-dialog angular js 中持久化数据

Question

我有一个页面，按钮为“高级选项”。单击它，我将打开一个 md 对话框，其中包含许多输入文本框和字段。如果我关闭此 md 对话框并再次单击“高级选项”重新打开，则数据不会持久化。我的意思是文本框中的输入并重置为默认值。

我想在不同的调用中坚持这一点。

<md-dialog-content>
  <div class="md-dialog-content">
      <div layout="column" layout-align="start">
        <div>
          <div class="md-title mainContent">Policy Title</div>
          <md-switch ng-model="switchval.component" ng-change="compSwitch(switchval.component)">
          </md-switch>
        </div>
        <div id="subContentID" layout="column" layout-align="start" class="subContent">
          <div layout="row" layout-align="start start">
             Policy
             <md-select ng-model="compClassPolicy" ng-change="compClass(compClassPolicy)" placeholder="Existing" required md-no-asterisk="false"
             style="margin: 0px;">
              <md-option value="USE_EXISTING">Google</md-option>
              <md-option value="USE_NEW">Amazon</md-option>
              <md-option value="USE_NEW_AND_EXISTING">Motorola</md-option>
            </md-select>
          </div>
          <div id="box">
          </div>
          <div id="addButtonComponent" align="center" style="display: none;">
            <md-button class="md-raised md-primary" ng-click="addTextGroupComponent()">Add</md-button>
          </div>
        </div>
      </div>
      <md-divider style="margin: 20px 0;"></md-divider>
    </div> </md-dialog-content>

Answer 1

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

$rollbackViewValue();取消更新并重置输入元素的 值以防止更新 $modelValue，这可能是由 待处理的去抖动事件或因为输入正在等待某个 未来的事件。

如果您有一个使用 ng-model-options 设置去抖动的输入 事件或事件，例如模糊，您可能会遇到以下情况 $viewValue 与 ngModel 不同步的时期 $modelValue.

在这种情况下，如果您尝试更新 ngModel 的 $modelValue 在这些 debounced/future 之前以编程方式 事件已解决/发生，因为 Angular 的脏检查 机制无法判断模型是否实际发生了变化 与否。

$rollbackViewValue() 方法应该在之前被调用 以编程方式更改可能具有此类的输入模型 待处理的事件。这很重要，以确保输入 字段将使用新的模型值和任何未决的 操作被取消。

正常的用例是复制模型，可选择持久化模型，如果一切正常，则刷新模型。

_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;})

}

更多详情可以查看this。