angularjs - Angular Bootstrap Datepicker 更改月份事件

Question

当用户在日期选择器日历上更改月份时，我需要调用我的后端，这可以通过 UI Bootstrap 1.3 实现吗？

Answer 1

您可以使用装饰器扩展 datepicker 指令，并在装饰器中覆盖 compile 函数以在 activeDate 上添加 $watch。您可以检查日期的月份或年份是否已更改，如果更改，则调用注入(inject)装饰器的服务上的函数。如有必要，请传递日期，并在服务中执行对后端的调用。

下面和 fiddle 中的示例- MyService 只是记录日期，但您可以替换为对后端的调用。

var app = angular.module('app', ['ui.bootstrap']);

angular.module('app').service('MyService', function() {
    this.doStuff = function(date) {
        console.log(date);
    }
});

angular.module('app').config(function($provide) {
    $provide.decorator('datepickerDirective', ['$delegate', 'MyService', function($delegate, MyService) {
        var directive = $delegate[0];

        var link = directive.link;

        directive.compile = function() {
            return function(scope, element, attrs, ctrls) {
                link.apply(this, arguments);

                scope.$watch(function() {
                    return ctrls[0].activeDate;
                }, function(newValue, oldValue) {
                    if (oldValue.getMonth() !== newValue.getMonth() 
                       || oldValue.getYear() !== newValue.getYear()) {
                        MyService.doStuff(newValue);
                    }
                }, true);
            }
        };
        return $delegate;
    }]);
});