我有一个使用完整日历的 Angular 应用程序。我有一个 Full Calendar custom button当用户点击时,应该打开一个 Angular Bootstrap Datepicker .我目前正在切换 CSS 可见性,但出于某种原因,除非我调整窗口大小,否则日期选择器不会显示(单击按钮后)。
我的模板:
<div id="cal-go-to-date" ng-style="goToDate.style">
<div uib-datepicker ng-model="goToDate.dt" class="well well-sm" datepicker-options="goToDate.options"></div>
</div>
我的 Angular Controller :
$scope.uiConfig = {
calendar: {
// Other configuration
header: {
center: 'title'
},
customButtons: {
goToDate: {
text: 'go to date',
click: function(event) {
$scope.goToDate.style.visibility = 'visible';
}
}
},
// Other configuration
}
};
$scope.goToDate = {
dt: new Date(),
options: {
datepickerMode: 'month',
minMode: 'month'
},
style: {
'position': 'absolute',
'top': '224px',
'left': '76px',
'min-height': '290px',
'z-index': '99999',
'visibility': 'hidden'
}
};
我正在调用 $scope.goToDate.style.visibility = 'visible';
但这不起作用,除非我调整窗口大小。我该怎么做才能切换选择器的可见性?
最佳答案
尝试用 $applyAsync
结束通话喜欢:
$scope.$applyAsync(function(){ $scope.goToDate.style.visibility = 'visible'; });
因为看起来这发生在 angularjs 范围之外。
关于javascript - 如何在点击时显示 Angular UI Bootstrap 日期选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47789137/