Javascript ui掩码和$parser/$formatters不'；我不能在同一个指令中工作
我试图在同一个目录中集成AngularJS ui掩码和$parser/$formatters，以便有一个完整的指令来处理我的所有日期输入。 当我无法从link函数的$parsers中获得正确的模型值时，ui掩码似乎编译正确 这是我的建议：Javascript ui掩码和$parser/$formatters不'；我不能在同一个指令中工作,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图在同一个目录中集成AngularJS ui掩码和$parser/$formatters，以便有一个完整的指令来处理我的所有日期输入。 当我无法从link函数的$parsers中获得正确的模型值时，ui掩码似乎编译正确 这是我的建议： var-app=angular.module（'myApp'，['ui.mask']）； app.controller（'myCtrl'，function（）{ var vm=这个； }); app.directive（'myDate'，['$compile
var-app=angular.module（'myApp'，['ui.mask']）；
app.controller（'myCtrl'，function（）{
var vm=这个；
});
app.directive（'myDate'，['$compile'，'$filter'，myDate]）；
函数myDate（$compile，$filter）{
var指令={
限制：'E'，
要求：'ngModel'，
范围：{
ngModel:“=”
},
编译：编译，
链接：链接
};
返回指令；
函数编译（元素、属性）{
返回函数（范围、元素、属性）{
scope.keyup=功能（键）{
如果（键===68）{
log（“D键！”）；
}
};
var模板=“”；
html（模板）；
element.removeClass（attrs.class）；
$compile（element.contents（））（范围）；
}
}
功能链接（范围、元素、属性、模型）{
ngModel.$parsers.push（函数（数据）{//视图到模型
风险值年份=数据子项（-4）；
var月=数据。substr（2，2）；
var day=data.substr（0,2）；
var sep='-'；
数据=（年、月、日）？日期。解析（年+九月+月+九月+日）：“”；
返回数据；
});
ngModel.$formatters.push（函数（数据）{//要查看的模型
数据=$filter（'date'）（数据'dd/MM/yyyy'）；
返回数据；
});
}
}
myValue模型：{{vm.myValue}}
（1985年1月1日修正的myValue:473385600000）
你能帮帮我吗？我用我找到的解决方案回答了我自己的问题，这里是plunkr：
app.directive（'myDate'，['$filter'，myDate]）；
函数myDate（$filter）{
var指令={
限制：'E'，
模板：模板，
要求：'ngModel'，
作用域：{}，
链接：链接
}
返回指令；
函数模板（元素、属性）{
var模板=“”；
返回模板；
}
功能链接（范围、元素、属性、ctrl）{
scope.keyup=功能（键）{
如果（键===68）{//D键
scope.date=$filter（'date'）（新日期（），'ddMMyyyy'）；
}
ctrl.$setViewValue（范围日期）；
};
ctrl.$formatters.push（函数（数据）{//要查看的模型
数据=$filter（'date'）（数据'ddMMyyyy'）；
返回数据；
});
ctrl.$parsers.push（函数（数据）{///视图到模型
变量年份=data.toString（）.substr（-4）；
var month=data.toString（）.substr（2,2）；
var day=data.toString（）.substr（0,2）；
var sep='-'；
数据=（年、月、日）？日期。解析（年+九月+月+九月+日）：“”；
返回数据；
});
/*范围：$watch（'日期'，函数（）{
ctrl.$setViewValue（范围日期）；
});*/
ctrl.$render=function（）{
scope.date=ctrl.$viewValue；
};
}
}
基本上，我添加了一个render函数来更新内部作用域的日期变量，如果需要，我编写了一个$watch函数来保持模型的更新。我用我找到的解决方案回答了我自己的问题，以下是plunkr：
app.directive（'myDate'，['$filter'，myDate]）；
函数myDate（$filter）{
var指令={
限制：'E'，
模板：模板，
要求：'ngModel'，
作用域：{}，
链接：链接
}
返回指令；
函数模板（元素、属性）{
var模板=“”；
返回模板；
}
功能链接（范围、元素、属性、ctrl）{
scope.keyup=功能（键）{
如果（键===68）{//D键
scope.date=$filter（'date'）（新日期（），'ddMMyyyy'）；
}
ctrl.$setViewValue（范围日期）；
};
ctrl.$formatters.push（函数（数据）{//要查看的模型
数据=$filter（'date'）（数据'ddMMyyyy'）；
返回数据；
});
ctrl.$parsers.push（函数（数据）{///视图到模型
变量年份=data.toString（）.substr（-4）；
var month=data.toString（）.substr（2,2）；
var day=data.toString（）.substr（0,2）；
var sep='-'；
数据=（年、月、日）？日期。解析（年+九月+月+九月+日）：“”；
返回数据；
});
/*范围：$watch（'日期'，函数（）{
ctrl.$setViewValue（范围日期）；
});*/
ctrl.$render=function（）{
scope.date=ctrl.$viewValue；
};
}
}
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.1/mask.min.js"></script>
<body>
<script>
var app = angular.module('myApp', ['ui.mask']);
app.controller('myCtrl', function() {
var vm = this;
});
app.directive('myDate', ['$compile', '$filter', myDate]);
function myDate($compile, $filter) {
var directive = {
restrict: 'E',
require: 'ngModel',
scope: {
ngModel: "="
},
compile: compile,
link: link
};
return directive;
function compile(element, attrs) {
return function(scope, element, attrs) {
scope.keyup = function(key) {
if (key === 68) {
console.log("D key!");
}
};
var template = '<input class="' + attrs.class + '" ng-model="ngModel" ui-mask="99/99/9999" ng-keyup="keyup($event.keyCode)" type="text">';
element.html(template);
element.removeClass(attrs.class);
$compile(element.contents())(scope);
}
}
function link(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(data) { // view to model
var year = data.substr(-4);
var month = data.substr(2, 2);
var day = data.substr(0, 2);
var sep = '-';
data = (year && month && day) ? Date.parse(year + sep + month + sep + day) : '';
return data;
});
ngModel.$formatters.push(function(data) { // model to view
data = $filter('date')(data, 'dd/MM/yyyy');
return data;
});
}
}
</script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<my-date ng-model="vm.myValue"></my-date>
<p>myValue model: {{vm.myValue}}</p>
<i>(myValue correct for 01/01/1985: 473385600000)</i>
</div>
</body>
</html>
app.directive('myDate', ['$filter', myDate]);
function myDate($filter) {
var directive = {
restrict: 'E',
template: template,
require: 'ngModel',
scope: {},
link: link
}
return directive;
function template(element, attrs) {
var template = '<input ng-model="date" ng-keyup="keyup($event.keyCode)" ui-mask="99/99/9999" type="text" ';
if (attrs.class) {
template += 'class="' + attrs.class + '"';
element.removeClass(attrs.class);
}
template += '/>';
return template;
}
function link(scope, element, attrs, ctrl) {
scope.keyup = function(key) {
if (key === 68) { // D key
scope.date = $filter('date')(new Date(), 'ddMMyyyy');
}
ctrl.$setViewValue(scope.date);
};
ctrl.$formatters.push(function(data) { // model to view
data = $filter('date')(data, 'ddMMyyyy');
return data;
});
ctrl.$parsers.push(function(data) { // view to model
var year = data.toString().substr(-4);
var month = data.toString().substr(2, 2);
var day = data.toString().substr(0, 2);
var sep = '-';
data = (year && month && day) ? Date.parse(year + sep + month + sep + day) : '';
return data;
});
/*scope.$watch('date', function() {
ctrl.$setViewValue(scope.date);
});*/
ctrl.$render = function() {
scope.date = ctrl.$viewValue;
};
}
}