焦点时如何触发角度 ui typeahead [英] how angular ui typeahead trigger when focus

问题描述

我正在使用 angular-ui typeahead.当焦点在输入框上时如何触发弹出项，而不是在输入之后.

I'm using angular-ui typeahead. How can I trigger the popup items when focus on the input box, not after typing.

推荐答案

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

I can attest to the issues associated with expanding the UX of the typeahead. While @ueq's solution works, it has trouble releasing focus/clicking. I suggest changing things, specifically how you trigger the open UX.

• 双击打开 - 这解决了@ueq 回答中的点击释放问题
• 检查现有值以免覆盖该值 - 我们不想在打开时意外覆盖现有数据，因此首先检查然后设置为无效值以触发打开.
• 更改指令的名称.... 使用更具描述性的内容 - 考虑到 ui.bootstrap 已经将它们的命名空间从 13.x 更改为 14.x，这才有意义用你自己的名字去.由于指令可以同时表示 UI 和/或 UX，因此将指令命名为其他开发者以后可以更轻松地追踪的内容是有意义的.

• open on double click - this solves the issue of click-releasing in @ueq's answer
• check for existing values so as not to overwrite the value - we don't want to accidentally overwrite existing data when we open, so check first then set to a non-valid value to trigger the open.
• change the name of the directive.... go with something more descriptive - considering that ui.bootstrap has already changed their namespace moving from 13.x to 14.x it just makes sense to go with your own name. Since directives can represent both UI &/or UX, it makes sense to name your directive to something that other developers can later track down more easily.

在使用预先输入时，人们对用户体验有一定的期望.单击输入并弹出某些内容可能会有些刺耳和误导.传统上，单击或 Tab 键聚焦到输入中，除了为键盘交互准备输入之外什么都不做.双击通常会预期会发生更多事情(例如，双击文件并从选择对话框中关闭与单击进行选择，然后单击确定"关闭).

When working with a typeahead, people have certain expectations of the UX. Clicking into an input and having something popup can be somewhat jarring and misdirecting. A single click or tab-focus into an input traditionally does nothing other than readying the input for keyboard interaction. A double click generally carries the expectation that something more will happen (e.g. double click a file & close from a select dialog vs. single click to select, then click "ok" to close).

在编程中，我们经常尝试在我们的代码中使用关注点分离范式.但我认为这也可以应用于这个特定的用户体验和一般用户体验.让单击 &标签聚焦做他们多年来一直在做的事情，并利用双击来扩展预先输入的用户体验.

In programming we often try to employ the separation of concerns paradigm to our code. But I think this could be applied also to this particular UX and UX in general. Let the single-click & tab-focusing do what they've done for years and utilize the double-click to expand the UX of the typeahead.

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

这篇关于焦点时如何触发角度 ui typeahead的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！