Angular uib typeahead，typeahead-is-open不起作用答案

【问题标题】：Angular uib typeahead, typeahead-is-open not workingAngular uib typeahead，typeahead-is-open不起作用
【发布时间】：2021-07-24 03:03:25
【问题描述】：

我有一个角度 uib-typeahead。这是我创建的 plunkr 的链接。https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview。

我使用了 typeahead-is-open 属性。

我想要的是当我点击 uib-typeahead 时，它应该会打开并显示所有值。我假设将 typeahead-is-open 设置为 true 可以完成这项工作。这个对吗？目前，将 typeahead-is-open 设置为 true 时，typeahead 不会打开。

这是我的html

<input ng-click = "myFunc()" click-outside="typeaheadIsOpen = false;" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-is-open="typeaheadIsOpen" class="form-control">

我的 JS

$scope.myFunc = function() {
   $timeout(function() {
       $scope.typeaheadIsOpen = true;
       $scope.$digest();
   })
}

我已将 typeahead-is-open 绑定到“typeaheadIsOpen”变量。单击预输入时，我调用 myFuc() 将变量 typeaheadIsOpen 设置为 true。

但是没有打开预输入。是不是我做错了什么？

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

您似乎无法使用typeahead-is-open 属性控制是否显示预先输入的弹出窗口。以下是源代码中的相关部分：

UibTypeaheadController

//binding to a variable that indicates if dropdown is open
var isOpenSetter = $parse(attrs.typeaheadIsOpen).assign || angular.noop;
...
scope.assignIsOpen = function (isOpen) {
    isOpenSetter(originalScope, isOpen);
};

该属性用于获取打开typeahead时用于更新范围的表达式，但不用于从范围中获取值并且没有设置相关的观察者。

【讨论】：

【解决方案2】：

遗憾的是，我在 2021 年仍在使用 angularjs。我最终找到了一个基于这些线程的 hack

https://github.com/angular-ui/bootstrap/issues/6619 https://github.com/angular-ui/bootstrap/issues/759

给定一个预先输入的输入

<input class="form-control address_input" 
       type="text"
       typeahead-editable="true"
       typeahead-on-select=...

在处理这个问题的角度控制器中，我创建了一个这样的函数

function _forceDropdownOpen() {
    const controller = $(".address_input").controller('ngModel');
    const old = controller.$viewValue;
    controller.$setViewValue(old +' ');
    controller.$setViewValue(old);
}

它只是模仿在结果中添加空间然后删除该空间。

这是我的应用之前和之后的示例。我的用例是在输入第三个字母之后，我的代码发送了一个 HTTP 请求。当该请求返回时，如果它有结果，我会调用此方法打开下拉列表。

之前：在输入第四个字母之前不会打开下拉菜单

之后：立即打开结果

【讨论】：