我正在使用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

07-24 09:38
查看更多