Angular UI Bootstrap 日期选择器，视图改变时的回调

Question

我用的是AngularUIBootstrap，都是最新的版本。

我希望在我的观点发生变化时收到回调，即当我从 5 月切换到 6 月时。由于以下情况，我需要它：

我的日期选择器使用 customClass 函数显示可用和不可用的日期。我获取了当月的所有可用性，但是当我单击下一个或上一个时，我没有任何回调来获取新的可用性。

此外，我不希望异步调用 42 次（每个 class 一次），因为您还会在 de datepicker 中遇到很多计时问题。我希望有人知道实现这一目标的方法，我现在已经搜索了很长时间的解决方案。

我的HTML:

<div class="input-group">
      <span class="input-group-addon" ng-click="vm.OpenDatepicker($event,'1')"><i class="ti-calendar"></i></span>
      <input type="text" class="form-control" datepicker-options="dpOptions" readonly style="cursor:pointer; background-color:white;"
             uib-datepicker-popup="dd-MMMM-yyyy" min-date="minDate" show-weeks="true" ng-model="selectedDate"
             is-open="vm.$scope.datepickers[1]" show-button-bar="false" ng-click="vm.OpenDatepicker($event,'1')" />
</div>

在 $scope.dpOptions（DatePicker 选项）中，我定义了自定义 classes 需要的内容：

$scope.dpOptions.customClass= function (data) {
//Here are my availabilities of the first month fetched
//When I change the month in my view, I first want to have the other availabilities 
//so I can return the new red/green classes
};

Answer 1

我的同事使用 angular $provide.decorator 函数找到了解决方案！这将为任何现有指令添加一些附加功能。

$provide.decorator('uibDatepickerDirective', function ($delegate) {
        var directive = $delegate[0];
        var directiveCompile = directive.compile;

        directive.compile = function () {
            var link = directiveCompile.apply(this, arguments);

            return function (scope) {
                link.apply(this, arguments);

                var oldMove = scope.move;
                scope.move = function (direction) {
                    oldMove.apply(this, arguments);
                    scope.$emit('datepicker.monthChanged', this.rows);
                }
            }
        };
        return $delegate;
    });

现在要调用一个函数，我可以将它添加到任何带有日期选择器的控制器中：

$scope.$on('datepicker.monthChanged', function (event, rows) {

            let startDate = rows[0][0].date;
            let endDate = rows[5][6].date;
            //Do anything you want!
            //To add customClass, every column has a customClass attribute you can set.

        });

Angular UI Bootstrap 日期选择器，视图改变时的回调

Angular UI Bootstrap datepicker, callback when view changes

datepicker

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap