javascript - 在更新 ng-model 或在 angularjs 复选框输入中执行 ng-change 之前需要确认

Question

我有一个复选框输入，选中时设置customer.isCompleted为真或假，并通过firebase api使用保存客户数据ng-change

input type="checkbox" ng-model="customer.isCompleted" ng-change="sc.data.$save(customer)"

但是我想确保当客户选中该框时，它会提示确认。如果用户点击 OK，那么它应该选中该框，更新ngModel 并触发，ngChange否则什么也不做。（并且在选中或取消选中该框时执行此操作）。选中时，确认框应显示 message1，未选中时应显示 message2。

我该如何实现这一点。我假设一个指令，但不知道我将如何实现它。

Answer 1

经过几次试验和错误，我找到了有效的代码。我已经扩展了来自 karaxuna 的 $parsers 解决方案。我在这里做的是检查 $viewValue 和 $modelValue，在按下取消按钮时更正 viewValue。

 return {
  restrict: 'A',
  require: 'ngModel',
  link: function(scope, element, attrs, ngModel) {

    var x = false;

    ngModel.$parsers.push(function(val) {
      if (ngModel.$viewValue === true && ngModel.$modelValue === false) {
        if (val && confirm('sure want to check?')) {
          return val;
        } else {
          ngModel.$setViewValue(x);
          ngModel.$render();
          return x;
        }
      }

      if (ngModel.$viewValue === false && ngModel.$modelValue === true) {
        if (!val && confirm('sure want to uncheck?')) {
          return val;
        } else {
          ngModel.$setViewValue(!x);
          ngModel.$render();
          return !x;
        }
      }

    });

  }
};

Answer 2

简单的方法：

input type="checkbox" ng-model="customer.isCompleted"
    ng-change="if(confirm('sure?')) sc.data.$save(customer)"

指导方式：

return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel){
        ngModel.$parsers.push(function(val){
            if(val && confirm('sure want to check?') ||
               !val && confirm('sure want to uncheck?'))
                return val;
        });
    }
}