Question

我有一个文本框和一个选项列表，其中的选项可以添加到该框中的当前文本中。我遇到的问题是，当我点击一个选项，并且该选项被添加到文本中时，我希望将光标放回到文本框中，以便用户可以继续键入。非常感谢任何帮助。

文字字段：

input type='text' ng-model='comment.text' ng-change='userList(comment.text)'

JS：

$scope.addUserToComment = function(user) {
  $scope.comment.text += user + " ";
  $scope.usersShow = false;
};

Answer 1

避免修改控制器中的DOM。

编辑：但要回答你的问题，ng-focus让我变得懒惰。

我会创建一个指令

angular.module('focus-me', []).
  .directive('focusMe', function(){ 
    return {
      scope: { watch_this: '=' },
      link: function(scope, element, attrs){ 
              scope.$watch('watch_this', function(){
                 $(element).focus();
              }
            }
    }                  
});

这为您提供了两个选项

input type='text' focus-me='comment.text' ng-model='comment.text' ng-change='userList(comment.text)'

或

input type='text' focus-me='some_obj_attr_you_toggle' ng-model='comment.text' ng-change='userList(comment.text)'

当你打字的时候，第一次打电话给观察者功能的时间会超过必要的次数（不是很重要）。

2nd只会在你的addUserTo函数中切换attr时调用watcher函数。

一种更简单的方法（虽然你在控制器中修改dom）将是：

$scope.addUserToComment = function(user, $event) {
  $($event.target).find('css selector to navigate to textbox').focus();
  $scope.comment.text += user + " ";
  $scope.usersShow = false;
};

在你的ng-click中添加另一个参数

ng-click='addUserToComment(user, $event)'

PS。代码可能不是100％正确，但你明白了。

Answer 2

$('a').on('click', '#options', function(){
    $('input').focus();
});

单击后返回文本框

2 个答案: