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

问题描述

我正在使用 angular-ui提前输入.将焦点放在输入框而不是键入后如何触发弹出项目.

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

推荐答案

我可以证明与扩展typeahead的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.

使用提前输入功能时，人们会对UX抱有一定的期望.单击输入并弹出一些内容可能会有点震撼和误导.传统上，单击或按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).

在编程中，我们经常尝试将关注点分离范例应用于我们的代码.但是我认为这也可以应用于这种特定的UX和一般的UX.只需单击&标签聚焦可以完成他们多年以来的工作，并利用双击来扩展预先输入的用户体验.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！