jquery - 使用 angularjs 保留光标位置

Question

以下代码片段执行我想要的输入，即删除所有非字母数字字符，转换为大写，并保留光标位置。

element = $(element);

element.keyup(function() {
    var x = element.val();
    var y = x && x.toUpperCase().replace(/[^A-Z\d]/g, '');
    if (x===y) return;
    var start = this.selectionStart;
    var end = this.selectionEnd + y.length - x.length;
    element.val(y);
    this.setSelectionRange(start, end);
});

我将此代码片段放置在指令的 link 中，它可以工作......主要是。

问题在于， Angular 模型在应用更改之前看到了值。我尝试在 Google 上搜索如何使用 $apply 或 $digest 或此处的任何内容，但没有任何效果。

(实际上，我以某种方式管理了它，但随后内容被重新渲染，我失去了位置。我无法重现它，但无论如何它还不够好。)

Answer 1

执行此操作的一种方法

• 输入仅清理一次
输入上的
• ngChange 仅触发一次

是使用 ngModelController 的 $parsers 数组提供。它被设计为影响模型值(通过其返回值)的地方，但它也可以用作输入事件的监听器。

app.directive('cleanInput', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      var el = element[0];

      function clean(x) {
        return x && x.toUpperCase().replace(/[^A-Z\d]/g, '');
      }

      ngModelController.$parsers.push(function(val) {
        var cleaned = clean(val);

        // Avoid infinite loop of $setViewValue <-> $parsers
        if (cleaned === val) return val;

        var start = el.selectionStart;
        var end = el.selectionEnd + cleaned.length - val.length;

        // element.val(cleaned) does not behave with
        // repeated invalid elements
        ngModelController.$setViewValue(cleaned);
        ngModelController.$render();

        el.setSelectionRange(start, end);
        return cleaned;
      });
    }
  }
});

但是，我不确定 $parsers 的这种用法是否有点黑客行为。该指令可以用作:

<input type="text" clean-input ng-model="name">

或者如果您想要 ngChange 函数:

<input type="text" clean-input ng-model="name" ng-change="onChange()">

这可以在 http://plnkr.co/edit/dAJ46XmmC49wqTgdp2qz?p=preview 上看到。