[英]ng-pattern not working inside directive
I'm trying to wrap an <input>
in a directive so that I can handle date validation and convert it from a string to an actual Date
object and maintain the Date
version in the original scope. 我试图将
<input>
包装在指令中,以便可以处理日期验证并将其从字符串转换为实际的Date
对象,并在原始范围内维护Date
版本。 This interaction is working as expected. 此交互正在按预期方式工作。 But the
ng-pattern
on the <input>
element isn't acting right. 但是
<input>
元素上的ng-pattern
行为不正确。 It is never invalidating the <input>
, regardless of what is entered. 无论
<input>
什么,它都不会使<input>
无效。
HTML HTML
<pl-date date="date"></pl-date>
JS JS
.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 here: https://jsfiddle.net/e5qu5rgy/1/ 此处的JSFiddle: https ://jsfiddle.net/e5qu5rgy/1/
Any help at all is greatly appreciated! 在所有的任何帮助, 不胜感激!
So it looks like the problem can be fixed by changing the link
function for the directive to be a controller
function instead, as follows 因此,看起来可以通过将指令的
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;
}
});
}
};
});
Before going into production, the controller
needs to be changed over to use an array for its arguments to protect against minification. 在投入生产之前,需要将
controller
转换为使用数组作为其参数以防止缩小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.