AngularJS 输入指令在模糊和焦点上应用和删除格式

Question

我正在尝试创建此输入指令，您可以在其中输入 8 位数字并进行模糊处理，它仅在视图值上应用 'yyyy/mm/dd' 格式。 modelValue 必须保持 'yyyymmdd' 格式。我想出了下面的代码，但此时我不知道如何使用 ngModelController。任何帮助都会很棒。

'use strict';

function applyFormat(value) {
  return value.substring(0, 4) + "/" + value.substring(4, 6) + "/" + value.substring(6, 8);
}

function removeFormat(value) {
  return value.match(/[0-9]+\.?[0-9]*/g).join('');
}

angular.module('app').directive('dateInput', () => {
  return {
    restrict: 'A',
    require: '?ngModel',
    scope: {
      dateFormat: '@'
    },
    link: (scope, elem, attrs, ctrl) => {

      if (!ctrl) return;

      // onBlur - make 8 digits number into yyyy/mm/dd format
      elem.bind('blur', () => {

        ctrl.$setViewValue(applyFormat(ctrl.$modelValue));

        ctrl.$parsers.push(() => {
          return removeFormat(ctrl.$viewValue);
        })

        ctrl.$formatters.push(() => {
          return applyFormat(ctrl.$modelValue);
        })

      })

      // onFocus - make yyyy/mm/dd styled data to 8digits num yyyymmdd
      elem.bind('focus', () => {
        if (!ctrl.$modelValue) return;

        ctrl.$formatters.push(() => {
          return removeFormat(ctrl.$viewValue);
        })

      })
    }
  }
})

指令的使用是这样的 <input type="text" date-input>

这就是我想用指令完成的，视图和模型值都已设置。 http://plnkr.co/edit/kZu5Ko?p=preview

Answer 1

或者您可以在需要处理数据时删除“/” 当你有一个月的第一天时，你应该写 2015/12/1 而不是 2015/12/01 记住这一点

Answer 2

我终于弄明白了，我的代码中缺少 $render()。此外，$parsers 和 $formatters 只需设置一次。我希望这会帮助其他在 ngModelController 中苦苦挣扎的人。

'use strict';

function applyFormat(value) {
  return value.substring(0, 4) + "/" + value.substring(4, 6) + "/" + value.substring(6, 8);
}

function removeFormat(value) {
  return value.match(/[0-9]+\.?[0-9]*/g).join('');
}

angular.module('app').directive('dateInput', () => {
  return {
    restrict: 'A',
    require: '?ngModel',
    scope: {
      dateFormat: '@'
    },
    link: (scope, elem, attrs, ctrl) => {

      if (!ctrl) return;

      ctrl.$parsers.push(() => {
        return removeFormat(ctrl.$viewValue);
      })

      ctrl.$formatters.push(() => {
        return applyFormat(ctrl.$modelValue);
      })

      // onBlur - make 8 digits number into yyyy/mm/dd format
      elem.bind('blur', () => {
        if (!ctrl.$modelValue || !ctrl.$viewValue) return;

        ctrl.$setViewValue(applyFormat(ctrl.$modelValue));
        ctrl.$render();

      })

      // onFocus - make yyyy/mm/dd styled data to 8digits num yyyymmdd
      elem.bind('focus', () => {
        if (!ctrl.$modelValue || !ctrl.$viewValue) return;

        ctrl.$setViewValue(ctrl.$modelValue);
        ctrl.$render();

      })
    }
  }
})

AngularJS 输入指令在模糊和焦点上应用和删除格式

AngularJS input directive applying and removing format on blur&focus

javascript

directive

angularjs