單擊后返回文本框

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)'

當您也鍵入時，1st將多次調用watcher函數（不是很重要）。

僅當您在addUserTo函數中切換attr時，2nd才會調用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中單擊添加另一個參數

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

PS。 代碼可能不是100％正確，但是您可以理解。

Answer 2

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