UI bootstrap 如果手动关闭下拉开关需要点击两次

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

手动更改类不是 open/close uib-dropdown 为什么要那样做？文档清楚地显示了 hiding/showing 下拉列表的 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

UI bootstrap 如果手动关闭下拉开关需要点击两次

UI bootstrap dropdown toggle needs to be clicked twice if closed manually

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap