javascript - ui-mask 和 $parser/$formatters 不能在同一指令中工作

标签 javascript angularjs angularjs-directive

我正在尝试将 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 函数来保持模型更新。

关于javascript - ui-mask 和 $parser/$formatters 不能在同一指令中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35993334/

相关文章:

java - 如何将选择选项静态值获取到 Controller

javascript - JavaScript 错误 : Object not defined

javascript - Angular js : How to make make ajax call for directives to create options

javascript - 为什么 angular.isNumber(NaN) 返回 true?

javascript - AngularJS 依赖注入(inject)

javascript - 如何在 Google Apps 脚本中将 API key 添加到 UrlFetchApp

javascript - AngularJs - 一个 $watch 函数中的多个应用/摘要周期

javascript - 如何在指令中使用 $watch 来更新类(无 jQuery)?

javascript - Angularjs 权限用户类型

javascript - AngularJS - 需要 $routeChangeStart 和 $locationChangeStart 的某种组合