在angular-bootstrap datepicker上使用自定义指令日期格式化程序

Question

一些有角度专业知识的人可以帮助我解决这个问题。我有一个自定义指令，可以将日期从mmddyyyy格式修改为mm / dd / yyyy格式。它在简单的模型中工作正常。

app.directive('bsDateFormatter', function() {
    return {
        restrict:'A',
        require: 'ngModel',
        scope : false,
        link: function(scope, element, attrs, modelCtrl) {

            var dateCheckRegex=new RegExp(/\d{8}/);

            var dateFormatter = function(dateValue) {
                if(dateValue == undefined){
                    dateValue = '';
                }
                var dateFormatted = dateValue;

                if (dateValue.length==8 && dateCheckRegex.test(dateValue)){
                        var mm=dateValue.substr(0,2);
                        var dd=dateValue.substr(2,2);
                        var yy=dateValue.substr(-4);
                        dateFormatted = mm+'/'+dd+'/'+yy;
                        modelCtrl.$setViewValue(mm+'/'+dd+'/'+yy);
                        modelCtrl.$render();
                }

                return dateFormatted;
            };
            modelCtrl.$parsers.push(dateFormatter);
            dateFormatter(scope[attrs.ngModel]);
        }
    };
});

当我在angular-bootstrap datepicker-popup中使用相同的指令时出现问题。内容不会重新格式化。

编辑： 这是我想要达到的目标。 https://plnkr.co/edit/xbu308o4GEBST0yrom19?p=preview 自定义指令适用于输入文本框。使用带有datepicker-popup指令的输入框不起作用。