javascript - 单击后返回文本框

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

避免修改 Controller 中的 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)'

当您打字时，第一个将调用观察器函数超过必要的次数(没什么大不了的)。

只有当您在 addUserTo 函数中切换 attr 时，2nd 才会调用观察程序函数。

更简单的方法(尽管您正在修改 Controller 中的 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% 正确，但您明白了。