我正在使用UI Bootstrap下拉组件在单击时显示angular-bootstrap-datetimepicker日历。我还添加了$watch
以关闭选择日期后的下拉菜单。
Plunker
<div uib-dropdown id="calendar1">
<h4>
<a uib-dropdown-toggle id="calendar1-toggle" href="">Select Date <b class="caret"></b>
</a>
</h4>
<ul uib-dropdown-menu>
<datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
</ul>
</div>
$scope.$watch('date', function(newValue){
angular.element(document.getElementById('calendar1')).removeClass('open');
})
removeClass('open')
起作用了,但是也带来了新的问题。选择日期(称为removeClass('open')
)后,必须单击两次下拉开关以使其打开。我查看了
uib
源代码,进行了一些挖掘,然后尝试了以下操作:window.angular.element(document.getElementById('calendar1')).removeClass('open');
window.angular.element(document.getElementById('calendar1-toggle'))
.removeClass('collapse')
.addClass('collapsing')
.attr('aria-expanded', false)
.attr('aria-hidden', true);
但是我仍然必须按两次切换键。我究竟做错了什么?
最佳答案
手动更改类不是打开/关闭uib-dropdown
的方式,为什么要这样做?文档清楚地显示了is-open
属性,用于隐藏/显示下拉列表:
标记:
<div uib-dropdown id="calendar1" is-open="dropdownOpen">
<h4>
<a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
</a>
</h4>
<ul uib-dropdown-menu>
<datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }">
</datetimepicker>
</ul>
</div>
脚本:
$scope.$watch('date',function(newValue){
//angular.element(document.getElementById('calendar1')).removeClass('open')
$scope.dropdownOpen = false;
});
柱塞:https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview