html代码
<div class="row" ng-repeat="form in data.forms track by $index">
<form name="myForm">
<input id="search_{{$index}}" type="text" name="location" ng-model="form.query" ng-keyup="keyUp($index)" >
</form>
</div>
角度代码
$scope.data = {
forms: []
};
jQuery(document).ready(function() {
setTimeout(function() {
jQuery('#search_0').focus();
}, 500);
});
以上代码有效,但需要额外的setTimeout。有没有更好的方法等待生成表单然后执行focus()?
答案 0 :(得分:3)
第一个角度规则:不要触摸指令范围之外的DOM。
ngRepeat
内的第一个输入元素可以使用自定义指令进行聚焦,该指令将使用ngRepeat
自动提供的$first
范围变量:
app.directive('focusedOn', [
'$timeout'
,function($timeout) {
return function($scope, $element, $attrs) {
function focus(){
$timeout(function(){
$element.focus();
}, 20);
}
if(_($attrs.focusedOn).isEmpty()){
return focus();
}
$scope.$watch($attrs.focusedOn, function(newVal){
if(newVal){
focus();
}
});
};
}
]
);
<div class="row" ng-form="myForm" ng-repeat="form in forms track by $index">
<input type="text" name="location" ng-model="form.query" focused-on="$first" />
</div>
注意:没有$ timeout,它可能会也可能不会。