typeahead-on-select angular-ui-bootstrap 后关注其他输入

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

此行为的发生是由于 typeahead-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-settings

中有一个选项

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">

typeahead-on-select angular-ui-bootstrap 后关注其他输入

Focus on other input after typeahead-on-select angular-ui-bootstrap

javascript

angularjs

angular-ui