wrapping bootstrap datepicker как директива

Question

Я пытаюсь обернуть загрузочный диск даты загрузки с помощью угловой директивы в дополнение к обычному датепикеру, который этот datepicker содержит другую форму даты для отображения и другой формат даты для 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); 
    } 
}; 

});

Thanks

Answer 1

кстати ваша исходная задача из

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

вы можете решить, обернув сферу $ применять

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

Answer 2

Зачем изобретать велосипед? Используйте ui-bootstrap директива datepicker - http://angular-ui.github.io/bootstrap/#/datepicker