19

我有这个角度代码：

<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()and as之类的函数？.find()

更新：

我发现这个 hack 是有效的（但它似乎仍然不是正确的解决方案）：

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

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

4

7 回答 7

38

DOM 操作应该在指令而不是控制器中。我会定义一个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();
        });
      });
    }
  };
});

普朗克

由于jqLit​​e在 DOM 遍历方法方面相当有限，因此我不得不使用parent().parent(). 您可能希望使用 jQuery 或一些 JavaScript 方法。

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

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

于 2013-03-20T16:35:23.250 回答
10

我最近一直在看 AngularJS，遇到了类似的情况。

我正在努力从主角度页面更新 Todo 示例应用程序，以在您双击 todo 项时添加“编辑”模式。

我能够使用基于模型/状态的方法解决我的问题。如果您的应用程序以类似的方式工作（当模型上的某些条件为真时，您希望将焦点设置在某个字段上），那么这也可能对您有用。

我的方法是将model.editing属性设置为true当用户双击待办事项标签时 - 这会显示可编辑的输入并隐藏常规的不可编辑标签和复选框。我们还有一个名为的自定义指令focusInput，它对同一model.editing属性有一个监视，并在值更改时将焦点设置在文本字段上：

<li ng-repeat="todo in todos">

    <div>
        <!-- Regular display view. -->
        <div ng-show="todo.editing == false">
            <label class="done-{{todo.done}}" ng-dblclick="model.editing = true">
                <input type="checkbox" ng-model="todo.done"/>{{todo.text}}
            </label>
        </div>

        <!-- Editable view. -->
        <div ng-show="todo.editing == true">
            <!--
                - Add the `focus-input` directive with the statement "todo.editing == true".
                  This is the element that will receive focus when the statement evaluates to true.

                - We also add the `todoBlur` directive so we can cancel editing when the text field loses focus.
            -->
            <input type="text" ng-model="todo.text" focus-input="todo.editing == true" todo-blur="todo.editing = false"/>
        </div>
    </div>

</li>

这是focusInput当某些条件评估为时将焦点设置在当前元素上的指令true：

angular.module('TodoModule', [])
    // Define a new directive called `focusInput`.
    .directive('focusInput', function($timeout){
        return function(scope, element, attr){

            // Add a watch on the `focus-input` attribute.
            // Whenever the `focus-input` statement changes this callback function will be executed.
            scope.$watch(attr.focusInput, function(value){
                // If the `focus-input` statement evaluates to `true`
                // then use jQuery to set focus on the element.
                if (value){
                    $timeout(function(){
                        element.select();
                    });
                }
            });

        };
    })
    // Here is the directive to raise the 'blur' event.
    .directive('todoBlur', [
        '$parse', function($parse){
            return function(scope, element, attr){

                var fn = $parse(attr['todoBlur']);
                return element.on('blur', function(event){

                    return scope.$apply(function(){
                        return fn(scope, {
                            $event: event
                        });
                    });

                });

            };
        }
    ]);
于 2013-06-29T01:51:25.047 回答
5

这是一个在目标 dom 元素上触发焦点事件的指令：

AngularJs 指令：

app.directive('triggerFocusOn', function($timeout) {
    return {
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                $timeout(function() {
                    var otherElement = document.querySelector('#' + attrs.triggerFocusOn);

                    if (otherElement) {
                        otherElement.focus();
                    }
                    else {
                        console.log("Can't find element: " + attrs.triggerFocusOn);
                    }
                });
            });
        }
    };
});

的HTML：

<button trigger-focus-on="targetInput">Click here to focus on the other element</button>
<input type="text" id="targetInput">

Plunker上的一个活生生的例子

于 2014-04-24T19:14:10.373 回答
4

我必须创建一个帐户才能提供简单的答案。

//Add a bool to your controller's scope that indicates if your element is focused
... //ellipsis used so I don't write the part you should know
$scope.userInputActivate = false;
...
//Add a new directive to your app stack
...
.directive('focusBool', function() { 
    return function(scope, element, attrs) {
        scope.$watch(attrs.focusBool, function(value) {
            if (value) $timeout(function() {element.focus();});
        });
    }
})
...

<!--Now that our code is watching for a scope boolean variable, stick that variable on your input element using your new directive, and manipulate that variable as desired.-->
...
<div class="button" ng-click="userInputActivate=true">...</div>
...
<input type="text" focus-Bool="userInputActivate">
...

当您不使用输入时，请务必重置此变量。您可以添加一个足够简单的 ng-blur 指令以将其更改回来，或者添加另一个将其重置为 false 的 ng-click 事件。将其设置为 false 只是为下一次做好准备。这是我发现的一个 ng-blur 指令示例，以防您找不到。

.directive('ngBlur', ['$parse', function($parse) {
    return function(scope, element, attr) {
        var fn = $parse(attr['ngBlur']);
        element.bind('blur', function(event) {
        scope.$apply(function() {
            fn(scope, {$event:event});
        });
    });
    }
}]);
于 2013-07-23T20:14:10.957 回答
4

这是我想出的。我从上面的 Mark Rajcok 的解决方案开始，然后开始使其易于重用。它是可配置的，不需要控制器中的任何代码。焦点是纯粹的表现方面，不应该需要控制器代码

html:

 <div id="focusGroup">
     <div>
         <input type="button" value="submit" pass-focus-to="focusGrabber" focus-parent="focusGroup">
     </div>
     <div>
         <input type="text" id="focusGrabber">
     </div> 
 </div>

指示：

chariotApp.directive('passFocusTo', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                $timeout(function () {
                    var elem = element.parent();
                    while(elem[0].id != attrs.focusParent) {
                        elem = elem.parent();
                    }
                    elem.find("#"+attrs.passFocusTo)[0].focus();
                });
            });
        }
    };
});

假设：

  • 你的给予者和接受者就在附近。
  • 当在一个页面上多次使用它时，使用的 id 是唯一的，或者给予和接受者位于 DOM 的一个独立分支中。
于 2014-02-10T10:12:51.527 回答
0

对于使用 .closest() 方法，我建议您应用原型继承机制狐狸扩展角度机会。像这样：

angular.element.prototype.closest = (parentClass)->
  $this = this
  closestElement = undefined
  while $this.parent()
    if $this.parent().hasClass parentClass
      closestElement = $this.parent()
      break
    $this = $this.parent()
  closestElement

标记：

<span ng-click="removeNote($event)" class="remove-note"></span>

用法：

 $scope.removeNote = ($event)->
    currentNote = angular.element($event.currentTarget).closest("content-list_item") 
    currentNote.remove()
于 2015-11-21T01:34:40.537 回答
0

要查找输入，请将其添加 Id<input id="input{{$index}}" .. />并将 ngRepeat 索引作为参数传递给函数ng-click="doSomething(element,$event, $index)"

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

在函数中使用$timeout零延迟等待 DOM 渲染结束。然后可以通过getElementByIdin$timeout函数找到输入。不要忘记添加$timeout到控制器。

.controller("MyController", function ($scope, $timeout)
{
  $scope.doSomething = function(element,$event, index) {
    //option A - start manipulating in the dark:
    $event.srcElement.parentNode.childNodes[1]

    $timeout(function () 
    {
      document.getElementById("input" + index).focus();
    });
  }
});
于 2016-06-20T18:10:24.030 回答