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

Question

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

Answer 1

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

建议更改

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

为什么

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

在编程中，我们经常尝试将separation of concerns范例用于我们的代码。但我认为这也可以应用于这个特定的UX和UX。让我们点击一​​下即可。使用tab-focused执行他们多年来所做的事情，并利用双击来扩展输入类型的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);
        }
    }
})

Answer 2

您好我遇到了同样的问题，this github discussion我能够弄明白：设置一个调用$setViewValue的指令，如

.directive('typeahead', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            element.bind('click', function () {
                ctrl.$setViewValue(' ' );
            });
            element.bind('blur', function () {
                ctrl.$setViewValue('');
            });
        }
    };
});

并将其添加到您的input：

<input type="text" [...] typeahead>

结果（我创建了一个plkr：http://plnkr.co/edit/Si6tFK2AammZy1HqEQzA）：

希望有所帮助：）

Answer 3

使用typeahead-min-length =＆＃34; 0＆＃34;如果你的angular-ui版本支持。否则这将帮助你：

pip

并将typeahead-open-on-focus作为属性添加到输入元素。

如果已经有一个值，这将打开预先关注的onfocus。 它会自动恢复视图值。

Answer 4

受到Boem答案的启发

您可以尝试这样做，以避免出现视图渲染问题

app.directive('typeahead', function () {
return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) {
        element.bind('click', function () {                
            ctrl.$setViewValue('');
            ctrl.$render();
        });
    }
};});