javascript - AngularJS 中的简单 dom 操作 - 单击按钮，然后将焦点设置到输入元素

Question

我有这个 Angular 代码:

<div class="element-wrapper" ng-repeat="element in elements">
  <div class="first-wrapper">
     <div class="button" ng-click="doSomething(element,$event)">{{element.name}}</div>   
  </div>
  <div class="second-wrapper">
    <input type="text" value="{{element.value}}">    
  </div>
</div>

我想要发生的情况:当用户单击按钮时 - 输入元素将获得焦点。

点击按钮元素并聚焦后如何找到输入元素？

我可以做一个如下所示的函数:

function doSomething(element,$event) {
  //option A - start manipulating in the dark:
  $event.srcElement.parentNode.childNodes[1]

  //option B - wrapping it with jQuery:
   $($event.srcElement).closest('.element-wrapper').find('input').focus();
}

它们都不起作用 - 有没有更好的 Angular 方法来做到这一点？像 jQuery 一样使用 .closest() 和 .find() 等函数？

更新:

我发现这个 hack 有效(但它看起来仍然不是正确的解决方案):

function doSomething(element,$event) {
   setTimeout(function(){
     $($event.srcElement).closest('.element-wrapper').find('input').focus();
   },0)
}

我用 setTimeout 包装它，这样在 Angular 完成所有操作后，它就会专注于输入元素。

Answer 1

DOM 操作应该在指令中而不是在 Controller 中。我将定义一个 focusInput 指令并在按钮上使用它:

<div class="button" focus-input>{{element.name}}</div>   

指令:

app.directive('focusInput', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        $timeout(function() {
          element.parent().parent().find('input')[0].focus();
        });
      });
    }
  };
});

Plunker

自 jqLite由于 DOM 遍历方法相当有限，我不得不使用 parent().parent()。您可能希望使用 jQuery 或一些 JavaScript 方法。

正如您已经发现的，需要 $timeout 以便在浏览器呈现后(即完成处理单击事件)调用 focus() 方法。

find('input')[0] 使我们能够访问 DOM 元素，从而允许我们使用 JavaScript focus() 方法(而不是 find('input').focus() 这需要 jQuery)。