AngularJS:不能忽略用户取消输入框后的更改事件

AngularJS: Can't ignore change event on an input field after user cancels with confirmation dialog

本文关键字:事件 输入 取消 不能 用户 AngularJS      更新时间:2023-09-26

我正在尝试创建一个指令,每当输入字段(在本例中为无线电)上的值更改时,向用户显示确认消息。

所以如果选择了"normal",用户点击"tracked"然后取消确认框,我希望我的模型和视图都被设置回"normal"。

我的输入是这样的:

<form name="form1">
  <input type="radio" id="blah" name="blah" ng-model="emailType" value="normal" ng-confirm-click="Are you sure you want to do that?">
  <input type="radio" id="blah2" name="blah2" ng-model="emailType" value="tracked" ng-confirm-click="Really?">
</form>

使用ng-change对我来说真的不起作用,因为如果我在确认中说不,那就太晚了:值已经被更改了。

我试图跟随这个链接。我的指令现在是这样的:

我的指令是这样的:

app.register.directive('ngConfirmClick', [ function () {
    return {
         priority: -1,
         restrict: 'A',
         require: 'ngModel',
         link: function (scope, element, attrs, modelCtrl) {
                   var message = attrs.ngConfirmClick;
    modelCtrl.$parsers.push(function (inputValue) {
                    var modelValue = modelCtrl.$modelValue;
                    if (inputValue !== modelValue && message && !confirm(message)) {
                        modelCtrl.$viewValue = modelValue;
                        modelCtrl.$render();
                    }
                    return modelCtrl.$viewValue;
                });
          }
    }
}]);

});

解析器在模型更改之前触发,我可以确认/取消我的确认框,我可以更改值。但是当函数返回时,我的模型最终会用新值更新。

我也尝试了$rollbackViewValue()根据我在网上看到的一个例子,但它不工作(函数未定义)。

我肯定我错过了一些非常重要的步骤。有人能帮帮忙吗?

找到你的问题了。

modelCtrl.$viewValue = modelValue;改为modelCtrl.$setViewValue(modelValue);

jsfiddle