Question

我正在尝试创建此输入指令，在其中键入8digits数字和模糊，它仅在viewvalue上应用'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

或者你可以删除＆＃34; /＆＃34;何时需要处理数据当你喜欢这个月的第一天时，你应该记住2015/12/1而不是2015/12/01记住这一点

Answer 2

我终于明白了，我的代码中缺少$render()。另外，$ parsers＆amp; $ 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输入指令在模糊和焦点上应用和删除格式

2 个答案: