автофокус на элементе ввода в угловом

Question

У меня есть форма в таблице, которая динамически добавляет записи с элементами ввода для [поля имени], выбора типов [int, string, boolean] и кнопки для создания новой записи с одинаковыми полями, по умолчанию фокус применяется к элементу кнопки для вновь созданной строки, которая происходит в ng-repeat. Я хотел, чтобы фокус применялся в поле ввода имени, я попытался сделать что-то подобное в функции addNewParam для применения фокуса: element($event.currentTarget).parent().parent().find('[name="new-input-param"] input')[0].focus();. Может ли кто-нибудь предложить мне лучший способ сделать это. Вот дом структура таблицы

<table class="table property-value"> 
<tbody> 
    <tr> 
     <th class="ng-binding">Name</th> 
     <th class="ng-binding">Type</th> 
     <th>&nbsp;</th> 
    </tr> 
    <!-- ngRepeat: param in pageParams track by $index --><tr ng-repeat="param in pageParams track by $index" class="ng-scope"> 
     <td name="input-param-name"> 
      <input class="form-control app-textbox app-widget-wrapper ng-pristine ng-untouched ng-valid ng-not-empty" name="input-param-name-name" type="text" placeholder="parameter name" ng-model-options="{updateOn: 'blur'}" ng-model="param.name" ng-change="onPageParamsUpdate()"> 
     </td> 
     <td> 
      <select name="input-param-type-name" class="form-control app-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="param.type" ng-options="val for val in pageParamTypes.split(',')" ng-change="onPageParamsUpdate()"><option label="string" value="string:string" selected="selected">string</option><option label="integer" value="string:integer">integer</option><option label="boolean" value="string:boolean">boolean</option><option label="date" value="string:date">date</option></select> 
     </td> 
     <td> 
      <button name="webservice-remove-param" class="app-button" ng-click="addNewParam($event, newParam)"> 
       <i class="glyphicon16 glyphicon glyphicon-plus"></i> 
      </button> 
     </td> 
    </tr><!-- end ngRepeat: param in pageParams track by $index --> 
</tbody> 
</table> 

Здесь функция addNewParam:

function addNewParam($event, newParam) { 
if (!newParam.name) { 
    wmToaster.show('error', $rs.locale.MESSAGE_ERROR_TITLE, Utils.replace($rs.locale.MESSAGE_WARN_NAME_EMPTY_DESC, ['Param'])); 
} else { 
Toaster.hide(); 
$s.pageParams.push(newParam); 
$s.newParam = {'name': '', 'type': 'string'}; 
$s.onPageParamsUpdate(); 
element($event.currentTarget).parent().parent().find('[name="wm-new-input-param"] input')[0].focus(); 
} 

}

Answer 1

автофокусировка itslef может сделать job.Just добавить эту пользовательскую директиву в ваше приложение.

app.directive('autoFocus', function($timeout) { 
 
    return { 
 
     restrict: 'AC', 
 
     link: function(_scope, _element) { 
 
      $timeout(function(){ 
 
       _element[0].focus(); 
 
      }, 0); 
 
     } 
 
    }; 
 
});

использование является:

<input name="theInput" auto-focus> 

Пожалуйста, обратитесь к How to set focus on input field? больше вариантов.