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

Question

我有一個有角度的 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”變量。 單擊 typeahead 時，我調用 myFuc() 將變量 typeaheadIsOpen 設置為 true。

但是預先輸入沒有打開。 有什么我做錯了嗎？

Answer 1

似乎您無法使用typeahead-is-open屬性控制是否顯示 typeahead 彈出窗口。 這是源代碼中的相關部分：

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 時更新范圍的表達式，但不用於從范圍獲取值且未設置相關的觀察者。

Answer 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 請求。 當該請求返回時，如果有結果，我會調用此方法打開下拉列表。

之前：在輸入第四個字母之前不會打開下拉菜單

之后：立即打開結果