我使用Angular UI Bootstrap,这两个版本都是最新版本.
我希望在我的视图发生变化时进行回调,即当我从5月切换到6月时.我需要这个,因为以下情况：
我的日期选择器使用customClass函数显示可用和不可用的日期.
我获取当前月份的所有可用性,但是当我单击下一个或上一个时,我没有任何回调来获取新的可用性.
另外,我不想要一次42次异步调用(每个类一次)因为你在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 Options)中,我定义了自定义类需要的内容：
$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
};
我的同事找到了一个使用角度$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;
});
要现在调用一个函数,我可以将它添加到任何带有datepicker的控制器：
$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.
});
