以角度方式设置元素焦点 [英] Set element focus in angular way

问题描述

在寻找如何使用 angular 设置焦点元素的示例后，我看到他们中的大多数人使用一些变量来监视然后设置焦点，并且他们中的大多数人为他们想要设置焦点的每个字段使用一个不同的变量.在具有许多字段的表单中，这意味着许多不同的变量.

After looking for examples of how set focus elements with angular, I saw that most of them use some variable to watch for then set focus, and most of them use one different variable for each field they want to set focus. In a form, with a lot of fields, that implies in a lot of different variables.

考虑到 jquery 的方式，但想以 angular 的方式做到这一点，我提出了一个解决方案，我们使用元素的 id 在任何函数中设置焦点，因此，由于我对 angular 非常陌生，我想得到一些意见，如果这种方式是正确的，有问题，无论如何，任何可以帮助我在角度上以更好的方式做到这一点的东西.

With jquery way in mind, but wanting to do that in angular way, I made a solution that we set focus in any function using the element's id, so, as I am very new in angular, I'd like to get some opinions if that way is right, have problems, whatever, anything that could help me do this the better way in angular.

基本上，我创建了一个指令，用于观察用户使用指令定义的范围值，或默认值的 focusElement，当该值与元素的 id 相同时，该元素会自行设置焦点.

Basically, I create a directive that watch a scope value defined by the user with directive, or the default's focusElement, and when that value is the same as the element's id, that element set focus itself.

angular.module('appnamehere')
  .directive('myFocus', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        if (attrs.myFocus == "") {
          attrs.myFocus = "focusElement";
        }
        scope.$watch(attrs.myFocus, function(value) {
          if(value == attrs.id) {
            element[0].focus();
          }
        });
        element.on("blur", function() {
          scope[attrs.myFocus] = "";
          scope.$apply();
        })        
      }
    };
  });

由于某种原因需要获得焦点的输入会这样做

An input that needs to get focus by some reason, will do this way

<input my-focus id="input1" type="text" />

这里是设置焦点的任何元素:

Here any element to set focus:

<a href="" ng-click="clickButton()" >Set focus</a>

以及设置焦点的示例函数:

And the example function that set focus:

$scope.clickButton = function() {
    $scope.focusElement = "input1";
}

这是一个很好的角度解决方案吗?它是否有我的糟糕体验还没有看到的问题?

Is that a good solution in angular? Does it have problems that with my poor experience I don't see yet?

推荐答案

你的解决方案的问题是，当绑定到其他创建新范围的指令时，它不能很好地工作，例如ng-repeat.更好的解决方案是简单地创建一个服务函数，使您能够在控制器中强制聚焦元素或在 html 中以声明方式聚焦元素.

The problem with your solution is that it does not work well when tied down to other directives that creates a new scope, e.g. ng-repeat. A better solution would be to simply create a service function that enables you to focus elements imperatively within your controllers or to focus elements declaratively in the html.

演示

JAVASCRIPT

服务

 .factory('focus', function($timeout, $window) {
    return function(id) {
      // timeout makes sure that it is invoked after any other event has been triggered.
      // e.g. click events that need to run before the focus or
      // inputs elements that are in a disabled state but are enabled when those events
      // are triggered.
      $timeout(function() {
        var element = $window.document.getElementById(id);
        if(element)
          element.focus();
      });
    };
  });

指令

  .directive('eventFocus', function(focus) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        focus(attr.eventFocusId);
      });

      // Removes bound events in the element itself
      // when the scope is destroyed
      scope.$on('$destroy', function() {
        elem.off(attr.eventFocus);
      });
    };
  });

控制器

.controller('Ctrl', function($scope, focus) {
    $scope.doSomething = function() {
      // do something awesome
      focus('email');
    };
  });

HTML

<input type="email" id="email" class="form-control">
<button event-focus="click" event-focus-id="email">Declarative Focus</button>
<button ng-click="doSomething()">Imperative Focus</button>

这篇关于以角度方式设置元素焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！