在预先选择的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>

它有效,所以如何在选择预先输入后关注textarea或输入？

Answer 1

由于typeahead-on-select中的回调,会发生此行为.它会聚焦您的元素,但由于此代码,输入会再次聚焦

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

您可以通过异步聚焦元素来解决此问题.

在你的focusSuccessive函数中使用$ timeout并将你的textarea聚焦在$ 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">