首页 文章

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

提问于
浏览
0

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

但我仍然需要按两次切换 . 我究竟做错了什么?

1 回答

  • 4

    手动更改类不是你如何打开/关闭 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

相关问题