将 bootstrap-datepicker 与 angularjs 一起使用。选择日期时需要找到更新 ng-model 的方法

Question

简而言之，我需要在使用 bootstrap-datepicker 时找到更新 ng-model 的方法。这是我为演示 http://plnkr.co/edit/nNTEM25I2xX2zRKOWbD1?p=preview 发生的事情而制作的一个 plunker。我已经尝试过四处搜索，并且相当肯定我需要使用指令将值传递给模型。在文本框中键入内容将更新选定的日期模型，但仅使用日期选择器不会执行任何操作。下面的指令看起来应该可以工作，但不幸的是它似乎没有太大的效果。

app.directive('datepicker', function() {
    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, element, attrs, ngModelCtrl) {
            $(function() {
                element.datepicker({
                    dateFormat : 'dd/mm/yy',

                    onSelect : function(date) {

                        ngModelCtrl.$setViewValue(date);

                        element.datepicker("setDate", date);

                        scope.$apply();

                    }
                });
            });
        }
    }
});

一个简单的解决方案是只使用另一个日期选择器，但不幸的是，由于限制我可以使用多少个外部库，这是我必须使用的日期选择器。任何见解将不胜感激！！！

Answer 1

我强烈建议使用 UI-Bootstrap 或类似的东西。

但是对于那些出于某种原因需要使用 Bootstraps 日期选择器的人来说，这里是使用您的指令的起点，有一些更改：

app.directive('datepicker', function() {
   return {
      restrict: 'A',
      require: 'ngModel',
      compile: function() {
         return {
            pre: function(scope, element, attrs, ngModelCtrl) {
               // Initialize the date-picker
               $(element).datepicker({
                  format: 'dd/mm/yyyy'
               }).on('changeDate', function(ev) {
                  // Binds the changes back to the controller
                  // I also found that event.format() returns the string
                  // I wasn't aware of that. Sure beats using the date object and formatting yourself.
                  ngModelCtrl.$setViewValue(ev.format('dd/mm/yyyy'));

                  // I HATE using $apply, but I couldn't get it to work without
                  scope.$apply();
               });
            }
         }
      }
   }
});

HTML：

<input type="text" datepicker="" ng-model="date" />

非常简单直接并且允许你重复使用，here is a working plunker