Настройка фокуса по ID Угловая

Question

После нажатия кнопки + фокус смещается в другое поле ввода в формате HTML. Я хочу сосредоточиться на текущем поле ввода, если пользователь не нажмет на другое поле ввода. Вот когда я хочу перенести фокус на выбранное поле ввода.

<div layout="row" layout-align="center center"> 
    <md-input-container class="md-block" flex="50"> 
     <input required id="circleTimeWordListEditText" type="text" placeholder="Words List" ng-model="circleTime.word"/> 

     <div ng-messages="$error"> 
      <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
</div> 

<div layout="row" layout-align="center center"> 
    <md-button class="md-raised md-primary" type="submit" 
       ng-click="circleTime.onAddButtonClicked()">+ 
    </md-button> 
</div> 

В настоящее время я делаю это:

document.getElementById('circleTimeWordListEditText').focus(); 

, и я попытался это, как хорошо, но это дает мне ошибку NOSEL.

angular.element('circleTimeWordListEditText').focus(); 

Я попытался это решение тоже:

mainApp.factory('focus', function($timeout, $window) { 
    return function(id) { 
     // timeout makes sure that it is invoked after any other event has been triggered. 
     // e.g. click events that need to run before the focus or 
     // inputs elements that are in a disabled state but are enabled when those events 
     // are triggered. 
     $timeout(function() { 
      var element = $window.document.getElementById(id); 
      if(element) 
       element.focus(); 
     }); 
    }; 
}); 

mainApp.directive('eventFocus', function(focus) { 
    return function(scope, elem, attr) { 
     elem.on(attr.eventFocus, function() { 
      focus(attr.eventFocusId); 
     }); 

     // Removes bound events in the element itself 
     // when the scope is destroyed 
     scope.$on('$destroy', function() { 
      elem.off(attr.eventFocus); 
     }); 
    }; 
}); 


onAddButtonClicked : function(elem) { 
      //do stuff 

      focus('circleTimeWordListEditText'); 
      /*var temp = document.getElementById('circleTimeWordListEditText'); 
      alert(temp); 
      temp.focus(); 
      angular.element('circleTimeWordListEditText'); 
      angular.element('circleTimeWordListEditText').focus();*/ 
     } 
    }, 

но он не работает.

Какое рекомендуется решить эту проблему?

Answer 1

Я думаю, вы можете использовать следующий фрагмент.

var myEl = document.getElementById('circleTimeWordListEditText'); 
var angularEl = angular.element(myEl); 

angularEl.focus(); 

Answer 2

У меня была такая же проблема. Это сработало для меня. Надеюсь, это сработает и для вас!

function someFunction() 
{ 
var element = angular.element("#id here"); 
element.focus() 
} 

Для вас, следующее может работать:

function onAddButtonClicked() 
{ 
    var element = angular.element("#circleTimeWordListEditText"); 
    element.focus() 
}