Angularjs 聚焦时如何触发前向触发

我正在使用。当我关注输入框时，而不是在键入之后，我如何触发弹出项。

嗨，我也有同样的问题，并且我能够解决它：设置一个指令，调用

$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 type="text" [...] typeahead>

结果（我创建了一个plkr:）：

---

希望这会有所帮助：）

我可以证明与扩展typeahead用户体验相关的问题。尽管@ueq的解决方案有效，但它在释放焦点/点击时遇到了问题。我建议改变一些事情，特别是如何触发开放用户体验

建议的修改

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

为什么？ 当使用typeahead时，人们对UX有一定的期望。点击输入并弹出一些内容可能会有点不和谐和误导。传统上，对输入进行单击或制表符聚焦，除了为键盘交互准备输入外，什么都不做。双击通常意味着会发生更多事情（例如，双击文件并从选择对话框关闭，而不是单击一次进行选择，然后单击“确定”关闭）

在编程中，我们经常尝试将范例应用到我们的代码中。但我认为这也适用于这个特定的用户体验和一般的用户体验。让单键点击和标签聚焦做他们多年来所做的事情，并利用双击来扩展typeahead的用户体验

普朗克-

如果您的angular ui版本支持，请使用typeahead min length=“0”。否则，这将帮助您：

directive('typeaheadOpenOnFocus', function ($timeout) {
       return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            element.bind('click', function () {
                var vv = ctrl.$viewValue;
                ctrl.$setViewValue(vv ? vv+' ': ' ' );
                $timeout(function(){ctrl.$setViewValue(vv ? vv : '');},10)
            });
        }
    };
})

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

如果typeahead onfocus已经有值，那么这将打开它。

---

并且它会自动还原视图值。

灵感来自于Boem的答案

为了避免视图渲染问题，可以尝试使用此方法

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

---

这里是另一个实现此功能的typeahead模块：……其他人也提出了这个问题：似乎已经解决了。编辑我的答案并将指令名称更改为

typeaheadClickOpen

不会有太大的区别。。。还是我遗漏了什么？我想从功能上讲，这个名字不会有什么不同。但是你在点击时触发了一些东西，如果你有一个现有的值，那么你在删除模型上的值。此外，在plunkr中，选择值后，单击下拉列表之外的任何位置，并注意输入值会发生变化。您的模糊处理程序正在擦除该值，这是不必要的。重命名此@ueq的另一个原因是并非所有TypeAhead都按需提供数据。在许多情况下，typeahead以异步方式获取数据，通过使用不同的指令名，您可以确保那些异步的不会得到相同的处理。感谢您的解释+1:）我会在找到时间后立即更新我的答案问题是，当输入字段失去焦点且用户再次聚焦输入字段时，它不会显示旧的结果，而是开始新的搜索。您可以将元素值设置为最后一个值+

'

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