Question

我正在使用UI Bootstrap下拉组件在点击时显示angular-bootstrap-datetimepicker日历。我还添加了$watch以在选择日期后关闭下拉列表。

<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);

但我还是要按两次切换。我做错了什么？

Answer 1

手动更改课程并非如何打开/关闭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;
  });

Plunker：https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview

如果手动关闭，则需要单击两次UI引导下拉切换

1 个答案: