Question

我在AngularJS指令中创建了一个输入元素：

<span ng-repeat="phrasePart in phraseParts">
    {{phrasePart}}<input ng-attr-id="{{ 'phrasePart-' + $index }}" ng-if="!$last"/>
</span>

我想要第一个输入元素，即（<input id="phrasePart-0" />获得焦点，所以我用jQuery做这个：

$(function () {
    $("#phrasePart-0").focus();
});

但是，此代码确实将焦点设置在直接在HTML中的输入元素中，而不是由AngularJS呈现。

如何在设置焦点之前让jQuery等待AngularJS创建输入元素“phrasePart-0”？
是否有“AngularJS方式”来设置更好的焦点？

Answer 1

更多＆＃39; Angular＆＃39;这样做的方法是使用指令。

~~然后将该指令应用于作为类的第一次出现~~

刚检查过这个。情况并非如此，因为ng-class不会为angular指令重新编译dom元素。

相反，这可能是一个更可靠的解决方案： http://jsfiddle.net/HB7LU/9958/

.directive("focusme", function(){
  return {
      scope:{
          focusme:"="
      },
    link:function(scope, element, attrs, $timeout){
        if (scope.focusme){
            element[0].focus();
        }
    }
  }
})

和HTML

 <span ng-repeat="phrasePart in phraseParts">
        {{phrasePart}}<input ng-attr-id="{{ 'phrasePart-' + $index }}" ng-if="!$last" focusme="$first" />
    </span>

Answer 2

使用，$ timeout

看看这个小提琴

http://jsfiddle.net/cndhpqrz/

var myApp = angular.module('myApp',[]);

function myfunc($scope, $timeout)
{

$scope.phraseParts=[1,2,3,4,5,6];

$timeout(function()
         {
    $("#phrasePart-2").focus();
});
}

Answer 3

使用angularjs的$ timeout服务。

在摘要周期完成后将调用 $ timeout处理程序。所以那时候你会得到你的输入。

$timeout(function () {
    $("#phrasePart-0").focus();
});

如何让jQuery等到AngularJS渲染出一个输入元素来设置焦点之后呢？

3 个答案: