提前選擇好角度UI引導后專注於其他輸入

Question

我對angular-ui bootstrap有問題：我有2個輸入：

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" class="form-control">
<textarea class="form-control" id="message" rows="10" data-ng-model="caller.data.text" tabindex="25"></textarea>

在我的控制器中，我有一個函數focusSuccessive（$ item，$ model，$ label，$ event）“ ，在選擇之后應將textArea作為焦點。

$scope.focusSuccessive = function($item, $model, $label, $event){
   angular.element("#message").focus();
}

但這不起作用，但是如果我按以下按鈕：

<button ng-click="focusSuccessive()">focus</button>

它可以正常工作，所以選擇預輸入后如何聚焦文本區域或輸入？

Answer 1

發生這種現象的原因是selectahead-on-select中的回調。 它使您的元素集中，但由於此代碼，輸入再次集中

$timeout(function() {
   element[0].focus(); 
 }, 0, false);

您可以通過異步關注元素來解決此問題。

在您的focusSuccessive函數中，使用$ timeout並將文本區域集中在該$ timeout內

$scope.focusSuccessive = function($item, $model, $label, $event){
  $timeout(function() { 
    document.getElementById('message').focus(); 

  }, 100, false);
}

這樣可以解決您的問題。

我不確定是否有其他方法可以解決此問題，而無需使用$ timeout

編輯

我認為預先輸入設置中有一個選項

typeahead-focus-on-select

默認情況下將其設置為true，將其設置為false將禁用此行為，並且您不需要$ timeout。 正常地集中你的元素

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" typeahead-focus-on-select=false class="form-control">