我正在使用
angular-ui typeahead.当焦点在输入框上时,如何触发弹出项目,而不是在输入后。
我可以证明与扩大类型头像的UX相关的问题。虽然@ ueq的解决方案可以正常工作,但是无法解决焦点/点击问题。我建议更改内容,特别是如何触发打开的UX。
建议更改
>双击打开 – 这解决了@ ueq答案中点击发布的问题
>检查现有的值,以免覆盖该值 – 我们不希望在打开时意外覆盖现有数据,因此请先检查,然后设置为非有效值以触发打开。
>更改指令的名称….去更具描述性的东西 – 考虑到ui.bootstrap已经将其名称空间从13.x更改为14.x,只需使用自己的名称即可。由于指令可以表示UI和/或UX,因此将您的指令命名为其他开发人员以后可以轻松跟踪的功能。
为什么
在使用打字机时,人们对UX有一定的期望。点击输入并弹出一些东西可能会有点刺耳和误导。单击或选项卡对焦输入传统上除了准备键盘交互的输入之外什么都不做。双击通常会预期会发生更多的事情(例如,从选择对话框双击文件并关闭,单击以选择,然后单击“确定”关闭)。
在编程中,我们经常尝试将separation of concerns范例应用于我们的代码。但是我认为这也可以应用于这个特定的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); } } })