从 angularJS 控制器将焦点设置到文本框

Question

我正在创建一个我正在使用 angularJS 的网络应用程序，我有一个 jqueryui datepicker ，它看起来像这样

<input type="text" ng-model="rc.reg.mddoj" ng-blur="rc.dojChange()" title="Date Of Joining" placeholder="Date Of Joining" class="form-control" datepicker />

在我的控制器中

r.dojChange = function () {
    var currentTarget = event.target;
    setTimeout(function () { r.reg.mddoj = currentTarget.value; }, 500);
}

执行此操作后，我想将焦点设置到我的下一个控件

<input type="text" ng-model="rc.reg.mdemail" title="EmailID" placeholder="EmailID" class="form-control validatingData" />

如何设置对来自 angularJS 控制器的元素的控制。

我只想通过指令将焦点设置到我的元素，并想在我的 r.dojChange function()

中调用该指令

Answer 1

要从您的 AngularJS 代码中聚焦一个元素，您必须执行以下操作：

$timeout(function() {
   const elementToFocus = $element[0].querySelector(<SELECTOR TO YOUR ELEMENT>);
   if (elementToFocus) {
      elementToFocus.focus();
   }
}, 0);

Answer 2

如果您使用 setTimeout，则必须使用 $scope.$apply() 以确保对范围的更改得到处理。或者你可以使用 $timeout :

r.dojChange = function() {
  var currentTarget = event.target;
  $timeout(function() {
    r.reg.mddoj = currentTarget.value; 
    document.querySelector('[title="EmailID"]').focus(); //<---
  }, 500)
}

从 angularJS 控制器将焦点设置到文本框

set focus to textbox from angularJS controller

javascript

angularjs

angularjs-directive

angularjs-controller