在AngularJS中轻松控制dom - 单击按钮，然后将焦点设置为输入元素 - 编程

I have this angular code:

我有这个角度代码：

<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>

What I want to happen: when the user clicks the button - the input element will be focused.

我想要发生的事情：当用户点击按钮时 - 输入元素将被聚焦。

How do I find the input element after I click the button element and focus it?

单击按钮元素并将其聚焦后，如何找到输入元素？

I can do a function that looks like this:

我可以做一个看起来像这样的函数：

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();
}

Neither of them work - Is there a nicer Angular way to do it? Using functions such as .closest() and .find() as in jQuery?

它们都不起作用 - 有更好的角度方法吗？在jQuery中使用.closest（）和.find（）等函数？

Update:

更新：

I found this hack to be working (but it still doesn't seem like the correct solution):

我发现这个黑客工作（但它似乎仍然不是正确的解决方案）：

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

I am wrapping it with setTimeout so after Angular finishes all of its manipulations it focuses on the input element.

我用setTimeout包装它，所以在Angular完成它的所有操作后，它会聚焦在input元素上。

7 个解决方案

#1

DOM manipulation should be in a directive instead of the controller. I would define a focusInput directive and use it on the button:

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

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

Directive:

指示：

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

Since jqLite is rather limited in terms of DOM traversal methods, I had to use parent().parent(). You may wish to use jQuery or some JavaScript methods.

由于jqLite在DOM遍历方法方面相当有限，我不得不使用parent（）。parent（）。您可能希望使用jQuery或一些JavaScript方法。

As you already found out, $timeout is needed so that the focus() method is called after the browser renders (i.e., finishes handling the click event).

正如您已经发现的那样，需要$ timeout，以便在浏览器呈现后调用focus（）方法（即完成处理click事件）。

find('input')[0] gives us access to the DOM element, allowing us to use the JavaScript focus() method (rather than find('input').focus() which would require jQuery).

find（'input'）[0]让我们可以访问DOM元素，允许我们使用JavaScript focus（）方法（而不是find（'input'）。focus（），它需要jQuery）。

在AngularJS中轻松控制dom - 单击按钮，然后将焦点设置为输入元素

7 个解决方案

#1

更多相关文章

随机推荐