Javascript 将引导数据采集器包装为指令

我试图用一个角度指令来包装引导日期选择器 除了通用日期选择器之外，此日期选择器还包含用于显示的不同日期格式和用于ng模型的不同日期格式

并得到一个错误：

 Error: [$rootScope:inprog] $digest already in progress

我的代码粘贴在下面：

app.directive('ngDatePicker', function () {
return {//this datePicker will show the date in the wanted format and save it (ng-model) with the default format of yy-mm-dd
    template: "<span><input id='displayDate' class={{class}} type='text'/><input id='hiddenDate' type='text' style='display:none'/></span>",
    require: 'ngModel',
    replace: true,
    scope: {
        ngModel: '=',
        class: '@'
    },
    link: function (scope, element, attrs, ngModelCtrl) {
        // set date pickers - this datePicker 
        var displayInput = element.find('#displayDate');
        var hiddenInput = element.find('#hiddenDate');
        var options = {};
        options.minDate = new Date();
        options.format = "yyyy-MM-dd";
        options.autoclose = 'true';
        displayInput.datepicker(options);

        displayInput.datepicker().on('changeDate', function () {
            //update the ng-model 
            var changedDate = displayInput.datepicker("getDate");
            var newDate = converDateToDefault(changedDate);
            if (scope.ngModel != newDate) {
                scope.$apply(function () {
                    hiddenInput.val = newDate;
                    scope.ngModel = newDate;
                });
            }
        });

        scope.$watch("ngModel", function (newVal) {
            if (typeof newVal !== undefined && newVal != null && newVal != "") {
                displayInput.datepicker('destroy');
                var option = {};
                option.format = "yyyy-MM-dd";
                displayInput.datepicker(option);
                var convertedVal = converDateToDefault(displayInput.datepicker("getDate"));
                if (convertedVal != "Invalid date" && newVal != convertedVal) {
                    displayInput.datepicker("setDate", convertDate(newVal));
                    hiddenInput.val = newVal;
                }
            }
        }, true);
    }
};

app.directive（'ngDatePicker'，函数（）{
return{//此日期选择器将以所需格式显示日期，并以默认格式yy mm dd保存它（ng模型）
模板：“”，
要求：'ngModel'，
替换：正确，
范围：{
ngModel:“=”，
类别：“@”
},
链接：函数（范围、元素、属性、ngModelCtrl）{
//设置日期选择器-此日期选择器
var displayInput=element.find（'#displayDate'）；
var hiddenInput=element.find（'#hiddenDate'）；
var选项={}；
options.minDate=新日期（）；
options.format=“yyyy-MM-dd”；
options.autoclose='true'；
displayInput.datepicker（选项）；
函数（'changeDate'）上的displayInput.datepicker（）{
//更新ng模型
var changedDate=displayInput.datepicker（“getDate”）；
var newDate=converDateToDefault（changedDate）；
如果（scope.ngModel！=newDate）{
作用域：$apply（函数（）{
hiddenInput.val=newDate；
scope.ngModel=newDate；
});
}
});
范围：$watch（“ngModel”），功能（newVal）{
if（typeof newVal！==undefined&&newVal！=null&&newVal！=“”）{
displayInput.datepicker（'destroy'）；
var选项={}；
option.format=“yyyy-MM-dd”；
displayInput.datepicker（选项）；
var convertedVal=converDateToDefault（displayInput.datepicker（“getDate”））；
if（convertedVal！=“无效日期”&&newVal！=convertedVal）{
displayInput.datepicker（“setDate”，convertDate（newVal））；
hiddenInput.val=newVal；
}
}
}，对）；
}
};

}))

---

谢谢

为什么要重新发明轮子？使用

ui引导

指令

datepicker

-

顺便说一句，您最初的问题是由于

       scope.$apply(function () {
                hiddenInput.val = newDate;
                scope.ngModel = newDate;
            });

您可以通过包装作用域来解决此问题。$apply

 if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
       scope.$apply(function () {
                hiddenInput.val = newDate;
                scope.ngModel = newDate;
            });
  }

---

我需要为datepicker的显示使用不同的dateformat，为ng Model使用不同的dateformat对不起，怎么做？从他们的文档中，我看不出他们是否支持此功能（差异显示和数据格式）将自定义格式字符串传递给

datepicker popup

属性，