焦点发生时，你能在Bootstrap3中触发数据切换吗？

Question

我正在使用这个html，它可以在输入字段中点击鼠标，正确显示datetimepicker＆＃34; menu＆＃34;。

但是，当输入控件通过制表符或程序聚焦获得焦点时，我想触发下拉菜单。如何使用Bootstrap3触发切换？

<div class="dropdown">
  <a class="dropdown-toggle my-toggle-select" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="">
      <div class="input-append">
        <input type="text"  toggle-on-focus class="input-large" data-ng-model="data.date"><span class="add-on"><i class="icon-calendar"></i></span>
      </div>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <datetimepicker data-ng-model="data.date"
                    data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select' }"></datetimepicker>
  </ul>
</div>

编辑======================

这不起作用：

.directive('toggleOnFocus', function($log) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            var dataToggle = _element.closest(".dropdown-toggle").parent();
            $log.debug("linking to ", _element);
            _element.on('focus', function(evt) {
                $log.debug("Event ", evt);
                $log.debug("On element ", _element);
                $log.debug("With toggle", dataToggle);
                dataToggle.dropdown();
            });
        }
    };
});

生成如下控制台输出：

因此，您可以看到焦点多次发生，事件已记录，但下拉列表从未显示。

我在这里使用的控件可以在这里找到： https://github.com/dalelotts/angular-bootstrap-datetimepicker

Answer 1

简单的错误，无法使用dropdown()的参数调用'toggle'，而在上面的代码中调用额外的.parent()。

.directive('toggleOnFocus', function($log) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            var dataToggle = _element.closest(".dropdown-toggle");
             _element.on('focus', function(evt) {
                 dataToggle.dropdown('toggle');
             });
        }
    };
});

哦浪费的时间只是一点点的事情！