Javascript 自动将格式作为用户类型添加到输入字段

我的应用程序是Angular 1.3.10

我目前正在使用jQuery函数向过期输入字段添加反斜杠，请参见下文

过期输入的格式为MM/YY，一旦用户键入第三个数字，“/”将自动添加。这是一个快速解决方案，但我需要将其转移到$scope中。我已经在大学里尝试过了，但是我被阻止了，所以我希望那些比我聪明得多的人能帮我一把

我需要移动到Angular$范围的当前jQuery代码：

$(document).ready(function () {
    $("#cc-exp").keypress(function () {
        if ($(this).val().length == 2) {
            $(this).val($(this).val() + "/");
        }
    });
});

过期html输入字段：

<md-input-container>
    <label>Expiration MM/YY</label>
    <input ng-model="expiration" id="cc-exp" ng-pattern="/^\d{2}\/\d{2}$/"  name="expiration" type="tel" class="long cc-exp" minlength="5" maxlength="5" required>
    <div ng-messages="payment.expiration.$error" ng-if="payment.$submitted" class="validation-error-display">
       <div ng-message="required">Please enter an expiration date.</div>
       <div ng-message="pattern">Must contain numbers only.</div>
       <div ng-message="minlength">Must be MM/YY format.</div>
       <div ng-message="maxlength">Must be MM/YY format.</div>
    </div>
</md-input-container>

有效期年月日
请输入过期日期。
必须仅包含数字。
必须是MM/YY格式。
必须是MM/YY格式。

使用$scope怎么样。$watch，每次过期时间更改时都会调用此函数：

$scope.$watch('expiration',function(newValue, oldValue){
      if(newValue.length == 2) $scope.expiration = $scope.expiration +'/';
});

---

使用指令将是一个不错的选择

标记

<input ng-model="expiration" id="cc-exp" ng-pattern="/^\d{2}\/\d{2}$/"  name="expiration" 
my-dir type="tel" class="long cc-exp" minlength="5" maxlength="5" required>

---

为什么不使用

ui mask

并屏蔽日期输入字段

app.directive('myDir', function() {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.on('keypress', function(e) {
                var val = ngModel.$viewValue;
                if (val.length == 2) {
                    scope.$apply(function() {
                        ngModel.$setViewValue(val + "/");
                    });
                }
            });
        }
    }
})