Question

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（）？

Answer 1

第一个角度规则：不要触摸指令范围之外的DOM。

ngRepeat内的第一个输入元素可以使用自定义指令进行聚焦，该指令将使用ngRepeat自动提供的$first范围变量：

PLUNKER

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，它可能会也可能不会。}

专注于ng-repeat生成的输入

1 个答案: