焦点ui typeahead如何在焦点时触发

Question

我正在使用angular-ui typeahead.如何在焦点输入框时触发弹出项目,而不是在键入后触发弹出项目.

Answer 1

我可以证明与扩展typeahead的UX相关的问题.虽然@ ueq的解决方案有效,但它无法释放焦点/点击.我建议改变一些事情,特别是如何触发开放式用户体验.

建议的改变

• 双击打开 - 这解决了@ ueq的答案中的点击释放问题
• 检查现有值以便不覆盖该值 - 我们不希望在打开时意外覆盖现有数据,因此请先检查然后设置为无效值以触发打开.
• 更改指令的名称....使用更具描述性的内容 - 考虑到ui.bootstrap已经将其命名空间从13.x更改为14.x,只需使用您自己的名称.由于指令可以代表UI和/或UX,因此将指令命名为其他开发人员以后可以更轻松地跟踪的内容是有意义的.

为什么

使用预先输入时,人们对UX有一定的期望.点击一个输入并弹出一些东西可能会有点刺耳和误导.单击或制表符焦点到输入传统上除了准备键盘交互的输入之外什么都不做.双击一般表示会发生更多事情(例如双击文件并从选择对话框中关闭而不是单击以选择,然后单击"确定"关闭).

在编程中,我们经常尝试将关注范式分离到我们的代码中.但我认为这也可以应用于这个特定的UX和UX.让单击和选项卡聚焦做他们多年来所做的事情,并利用双击来扩展先行者的用户体验.

plunker - http://plnkr.co/edit/GGl6X4klzVLKLX62Itbh?p=preview

.directive('typeaheadClickOpen', function($parse, $timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, elem, attrs) {
            triggerFunc = function(evt) {
                var ctrl = elem.controller('ngModel'),
                    prev = ctrl.$modelValue || '';
                if (prev) {
                    ctrl.$setViewValue('');
                    $timeout(function() {
                        ctrl.$setViewValue(prev);
                    });
                } else {
                    ctrl.$setViewValue(' ');
                }
            }
            elem.bind('dblclick', triggerFunc);
        }
    }
})