UI-掩码和 $parser/$formatters 在同一个指令中不起作用

我正在尝试将AngularJS ui-mask和$parser/$formatters集成到同一个目录中，以便有一个完整的指令来处理我所有的日期输入。ui-mask 似乎编译正确，而我无法从链接函数的$parsers中获取正确的模型值。

这是我的扑通：https://plnkr.co/edit/DOA7h7XxrvngsMAIzc5P?p=preview

<!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>

例如，如果我写"01/01/1985"，我希望在输出中包含"473385600000"。

你能帮我吗？

我用我建立的解决方案回答了我自己的问题，这里是 plunkr：

https://plnkr.co/edit/uKHApunRK9muCGCE5uXx?p=preview

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;
        };
    }
}

基本上，我添加了一个渲染函数来更新内部范围的日期变量，如果需要，我编写了一个$watch函数来保持模型更新。

相关内容

最新更新

热门标签：