ng-pattern 在指令中不起作用答案

【问题标题】：ng-pattern not working inside directiveng-pattern 在指令中不起作用
【发布时间】：2015-12-03 15:28:06
【问题描述】：

我正在尝试将<input> 包装在指令中，以便我可以处理日期验证并将其从字符串转换为实际的Date 对象并在原始范围内维护Date 版本。这种交互按预期工作。但是<input> 元素上的ng-pattern 行为不正确。无论输入什么，它都不会使<input> 无效。

HTML

<pl-date date="date"></pl-date>

.directive("plDate", function (dateFilter) {
  return {
    restrict: 'E',
    replace: true,
    template: '<input id="birthDateDir" name="birthDate" type="text" ng-pattern="{{getDatePattern()}}" ng-model="dateInput">',
    scope: {
        date: '='
    },
    link: function (scope) {
        scope.dateInput = dateFilter(scope.date, 'MM/dd/yyyy');

        scope.$watch('date', function (newVal) {
            if (newVal !== scope.tmp) {
                if (!newVal) {
                    scope.dateInput = null;
                } else {
                    scope.dateInput = dateFilter(scope.date, 'MM/dd/yyyy');
                }
            }
        });

        scope.getDatePattern = function () {
            var exp = '/';

            // Removed for brevity

            exp += '/';

            return exp;
        };

        scope.$watch('dateInput', function (newVal) {
            if (newVal !== null) {
                scope.date = new Date(newVal);
                scope.tmp = scope.date;
            }
        });
    }
};

这里的JSFiddle：https://jsfiddle.net/e5qu5rgy/1/

非常感谢任何帮助！

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-pattern

【解决方案1】：

所以看起来问题可以通过将指令的link 函数更改为controller 函数来解决，如下所示

.directive("plDate", function (dateFilter) {
    return {
        restrict: 'E',
        replace: true,
        template: '<input id="birthDateDir" name="birthDate" class="formField" type="text" ng-pattern="{{getDatePattern()}}" ng-model="dateInput">',
        scope: {
            date: '='
        },
        controller: function ($scope, $element, $attrs) {
            $scope.dateInput = dateFilter($scope.date, 'MM/dd/yyyy');

            $scope.$watch('date', function (newVal) {
                if (newVal !== $scope.tmp) {
                    if (!newVal) {
                        $scope.dateInput = null;
                    } else if (newVal.toString() !== "Invalid Date") {
                        $scope.dateInput = dateFilter($scope.date, 'MM/dd/yyyy');
                    }
                }
            });

            $scope.getDatePattern = function() {
                var exp = '/';

                // Months with 31 days
                exp += '^(0?[13578]|1[02])[\/.](0?[1-9]|[12][0-9]|3[01])[\/.](18|19|20)[0-9]{2}$';

                //Months with 30 days
                exp += '|^(0?[469]|11)[\/.](0?[1-9]|[12][0-9]|30)[\/.](18|19|20)[0-9]{2}$';

                // February in a normal year
                exp += '|^(0?2)[\/.](0?[1-9]|1[0-9]|2[0-8])[\/.](18|19|20)[0-9]{2}$';

                // February in a leap year
                exp += '|^(0?2)[\/.]29[\/.](((18|19|20)(04|08|[2468][048]|[13579][26]))|2000)$';

                exp += '/';

                return exp;
            };

            $scope.$watch('dateInput', function (newVal) {
                if (newVal !== null) {
                    $scope.date = new Date(newVal);
                    $scope.tmp = $scope.date;
                }
            });
        }
    };
});

在投入生产之前，需要将controller 转换为使用数组作为其参数以防止缩小。

【讨论】：