我有这个角度代码:
<div class="first-wrapper"><div class="button" ng-click="doSomething(element,$event)">{{element.name}}</div><div class="second-wrapper"><input type="text" value="{{element.value}}">
我想要发生的事情:当用户点击按钮时 - 输入元素将被聚焦.
点击按钮元素并聚焦后如何找到输入元素?
我可以执行如下所示的函数:
function doSomething(element,$event) {//选项A - 开始在黑暗中操作:$event.srcElement.parentNode.childNodes[1]//选项 B - 用 jQuery 包装它:$($event.srcElement).closest('.element-wrapper').find('input').focus();}它们都不起作用 - 有更好的 Angular 方法吗?像在 jQuery 中一样使用 .closest() 和 .find() 等函数?
更新:
我发现这个 hack 有效(但它似乎仍然不是正确的解决方案):
function doSomething(element,$event) {设置超时(功能(){$($event.srcElement).closest('.element-wrapper').find('input').focus();},0)}我用 setTimeout 包装它，所以在 Angular 完成其所有操作后，它专注于输入元素.
DOM 操作应该在指令中而不是在控制器中.我会定义一个 focusInput 指令并在按钮上使用它:
{{element.name}}指令:
app.directive('focusInput', function($timeout) {返回 {链接:函数(范围，元素，属性){element.bind('点击', function() {$超时(功能(){element.parent().parent().find('input')[0].focus();});});}};});由于 jqLite 在 DOM 遍历方法方面相当有限，我不得不使用 parent().parent().您可能希望使用 jQuery 或一些 JavaScript 方法.
正如您已经发现的那样，需要 $timeout 以便在浏览器呈现后调用 focus() 方法(即，完成处理点击事件).
find('input')[0] 允许我们访问 DOM 元素，允许我们使用 JavaScript focus() 方法(而不是 find('input').focus() 这需要 jQuery.
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?
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.
DOM manipulation should be in a directive instead of the controller. I would define a focusInput directive and use it on the button:
<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();
});
});
}
};
});
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.
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).
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).
这篇关于在 AngularJS 中轻松操作 dom - 单击按钮，然后将焦点设置到输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！