HTML5：如何将焦点设置文本输入与AngularJS列表(HTML5: How to set fo

我用AngularJS与NG-重复指令，显示对象作为一个列表的数组。

<li ng-repeat="cue in cues" class="form-inline">
    <input type="text" ng-model="cues[$index].text" class="input-xlarge"/>
    {{cue.isNewest}}
</li>

属性“isNewest”只有一个阵列的元件上是真实的。我想设置键盘焦点在该项目的文本输入。我如何能做到这一点与AngularJS？

Answer 1:

下面是一个使用ATTRS另一个指令执行$观察：

myApp.directive('focus', function () {
  return function (scope, element, attrs) {
    attrs.$observe('focus', function (newValue) {
      newValue === 'true' && element[0].focus();
      // or, if you don't like side effects (see @Christophe's comment):
      //if(newValue === 'true')  element[0].focus();
    });
  }
});

请注意，内插DOM属性值（即{{cue.isNewest}}总是计算为一个字符串，因此原因newvalue进行比较字符串'true' ，而不是关键字true 。

HTML：

<input type="text" ng-model="cues[$index].text" focus="{{cue.isNewest}}"
 class="input-xlarge" />{{cue.isNewest}}

此小提琴还具有切换所述阵列中的项目应具有焦点的方法。

请注意，如果你不加载的jQuery，我们需要使用element[0].focus()在链接功能（不element.focus() ）becaues jqLite不具有焦点（）方法。

Answer 2:

因为你会被操纵DOM，你需要创建一个指示。就像是：

var app = angular.module('quirli', []);
app.directive('focusable', function() {
    return {
        restrict: 'A',
        scope: {
            focusable: '@'
        },
        link: function(scope, elm, attrs) {
            scope.$watch('focusable', function (value) {
                if (value) {
                    elm[0].focus();
                }
            });
        }
    };
});

HTML：

<html ng-app="quirli" lang="en">
....  
<input type="text" ng-model="cues[$index].text" class="input-xlarge" focusable="{{cue.isNewest}}"/>

注：未经测试。

Answer 3:

有一个在AngularJS没有特殊的功能，接收焦点。你可以在你的控制器中的$手表用指示解决这个问题，但也。

Answer 4:

其他建议的答案工作确定9/10次我，但很快我就在“$消化正在进行中”的乐趣运行。

我有asgoth和马克Rajcok以前的答案略加修改的版本。基本上你注入$超时的依赖，并把焦点（）调用超时（...）内。 IIRC NG焦点不相同。

var app = angular.module('cgeers', []);
app.directive('focus', ["$timeout", function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focus, function (value) {
                if (value) {
                    $timeout(function() { element[0].focus(); });
                }
            });
        }
    };
}]);

文章来源: HTML5: How to set focus on a text input in a list with AngularJS