angularjs – 在Angular UI bootstrap datepicker中检测选定的月

警告,未来版本的Angular-UI Bootstrap可能会破坏这种方法

你需要使用AngularJS decorators.这是您需要的代码：

angular.module('myApp',[
  'ui.bootstrap'
  ])
  .config(function($provide) {
    $provide.decorator('datepickerDirective',function($delegate) {
      var directive = $delegate[0];
      //get a copy of the directive's original compile function
      var directiveCompile = directive.compile;

      //overwrite the original compile function
      directive.compile = function(tElement,tAttrs) {
        // call the directive's compile with apply to send the original 'this' and arguments to it
        var link = directiveCompile.apply(this,arguments);

        //here's where the magic starts
        return function(scope,element,attrs,ctrls) {
          //call the original link
          link.apply(this,arguments);
          //move is the internal function called when you click
          //on the chevrons for previous and next month
          var originalMove = scope.move;
          scope.move = function(direction) {
            originalMove.apply(this,arguments);
            //when move is called,the 'this' object contains a 'title' property with the current month!
            var currentMonth = this.title;
            //emit the event to parent scopes
            scope.$emit('datepicker.monthChanged',currentMonth);
          }
        }
      };

      return $delegate;
    });
  })

然后你的控制器可以监听datepicker.monthChanged：

$scope.$on('datepicker.monthChanged',function(event,newVal) {
  $scope.currentMonth = newVal;
})

由于datepicker控制器没有将当前所选日期保留在$scope中,因此它将其保存在一个闭包变量中,当调用函数move时,我发现你可以获得所选月份的唯一方法是在this对象中.只要您单击上一个和下个月的图标,就会调用move.

这是一个使用这个装饰器的傻瓜：http://plnkr.co/edit/iWJWjM8nCsh5TMupNioo?p=preview