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

Question

我有一个复选框输入，选中后将 customer.isCompleted 设置为 true 或 false，并使用 ng-change

通过 firebase api 保存客户数据

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

但是我想确保当客户选中该框时，它会提示确认。如果用户打入正常，则应选中该框，更新ngMode l并射击ngChange，否则什么都不做。选中时，确认框应显示 message1，未选中时，应显示 message2。

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

Answer 1

简单方法：

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

Answer 2

经过多次试验和错误后，我找到了有效的代码。我扩展了来自 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;
        }
      }

    });

  }
};

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

require confirmation before updating ng-model or executing ng-change in angularjs checkbox input

javascript

angularjs

checkbox

angularjs-nvd3-directives